diff --git a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx index 70f904f93da..5fa10d2034f 100644 --- a/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx +++ b/src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx @@ -32,7 +32,7 @@ import { import { QuantityInput } from "@/components/Common/QuantityInput"; import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect"; -import { useIsMobile } from "@/hooks/use-mobile"; +import useBreakpoints from "@/hooks/useBreakpoints"; import { BOUNDS_DURATION_UNITS, @@ -76,7 +76,7 @@ export function MedicationRequestQuestion({ const [medicationToDelete, setMedicationToDelete] = useState( null, ); - const isMobile = useIsMobile(); + const desktopLayout = useBreakpoints({ lg: true, default: false }); const handleAddMedication = (medication: Code) => { const newMedications: MedicationRequest[] = [ @@ -168,7 +168,7 @@ export function MedicationRequestQuestion({
{/* Header - Only show on desktop */} @@ -207,10 +207,14 @@ export function MedicationRequestQuestion({
{/* Body */} -
+
{medications.map((medication, index) => ( - {isMobile ? ( + {!desktopLayout ? ( {