used useWindowDimensions hook

ohcnetwork · Jan 7, 2025 · 623d7d1 · 623d7d1
1 parent 1a6607d
commit 623d7d1
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/src/pages/Encounters/tabs/EncounterPlotsTab.tsx b/src/pages/Encounters/tabs/EncounterPlotsTab.tsx
@@ -11,6 +11,8 @@ import {
 } from "@/components/Common/Charts/ObservationChart";
 import Loading from "@/components/Common/Loading";
 
+import useWindowDimensions from "@/hooks/useWindowDimensions";
+
 import { EncounterTabProps } from "@/pages/Encounters/EncounterShow";
 
 type QueryParams = {
@@ -21,6 +23,8 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
   const { t } = useTranslation();
   const [qParams, setQParams] = useQueryParams<QueryParams>();
 
+  const { width } = useWindowDimensions();
+
   const { data, isLoading } = useQuery<ObservationPlotConfig>({
     queryKey: ["plots-config"],
     queryFn: () => fetch(careConfig.plotsConfigUrl).then((res) => res.json()),
@@ -58,7 +62,7 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
             <ObservationVisualizer
               patientId={props.patient.id}
               codeGroups={tab.groups}
-              gridCols={window.innerWidth >= 768 ? 2 : 1}
+              gridCols={width >= 768 ? 2 : 1}
             />
           </TabsContent>
         ))}