From e6d229653a881cf25b30651a33ce3b334e18c427 Mon Sep 17 00:00:00 2001
From: Amjith Titus <amjithtitus09@gmail.com>
Date: Sun, 12 Jan 2025 23:14:54 +0530
Subject: [PATCH] Medication name missing in iPad - Fix (#9917)

---
 .../QuestionTypes/MedicationRequestQuestion.tsx    | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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<number | null>(
     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({
           <div className="min-w-fit">
             <div
               className={cn("max-w-[2144px] relative lg:border rounded-md", {
-                "bg-gray-50/50": isMobile,
+                "bg-gray-50/50": !desktopLayout,
               })}
             >
               {/* Header - Only show on desktop */}
@@ -207,10 +207,14 @@ export function MedicationRequestQuestion({
               </div>
 
               {/* Body */}
-              <div className={cn("bg-white", { "bg-transparent": isMobile })}>
+              <div
+                className={cn("bg-white", {
+                  "bg-transparent": !desktopLayout,
+                })}
+              >
                 {medications.map((medication, index) => (
                   <React.Fragment key={index}>
-                    {isMobile ? (
+                    {!desktopLayout ? (
                       <Collapsible
                         open={expandedMedicationIndex === index}
                         onOpenChange={() => {