Alignment issue and responsive plots

ohcnetwork · Jan 13, 2025 · 176f86b · 176f86b
1 parent b734061
commit 176f86b
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 13 deletions.
diff --git a/src/components/Patient/PatientInfoCard.tsx b/src/components/Patient/PatientInfoCard.tsx
@@ -30,8 +30,6 @@ import {
 
 import { Avatar } from "@/components/Common/Avatar";
 
-import useBreakpoints from "@/hooks/useBreakpoints";
-
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import { formatDateTime, formatPatientAge } from "@/Utils/utils";
@@ -66,8 +64,6 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
   const { t } = useTranslation();
   const queryClient = useQueryClient();
 
-  const isSmallDevice = useBreakpoints({ md: false, default: true });
-
   const { mutate: updateEncounter } = useMutation({
     mutationFn: mutate(routes.encounter.update, {
       pathParams: { id: encounter.id },
@@ -192,10 +188,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                         </Badge>
                       </div>
                     </PopoverTrigger>
-                    <PopoverContent
-                      align={isSmallDevice ? "start" : "center"}
-                      className="w-auto p-2"
-                    >
+                    <PopoverContent align={"start"} className="w-auto p-2">
                       <div className="space-y-2">
                         <h4 className="font-medium text-sm">Status History</h4>
                         {encounter.status_history.history.map(
@@ -236,10 +229,7 @@ export default function PatientInfoCard(props: PatientInfoCardProps) {
                         </Badge>
                       </div>
                     </PopoverTrigger>
-                    <PopoverContent
-                      align={isSmallDevice ? "end" : "center"}
-                      className="w-auto p-2"
-                    >
+                    <PopoverContent align={"end"} className="w-auto p-2">
                       <div className="space-y-2">
                         <h4 className="font-medium text-sm">Class History</h4>
                         {encounter.encounter_class_history.history.map(

diff --git a/src/pages/Encounters/tabs/EncounterPlotsTab.tsx b/src/pages/Encounters/tabs/EncounterPlotsTab.tsx
@@ -23,7 +23,7 @@ export const EncounterPlotsTab = (props: EncounterTabProps) => {
   const { t } = useTranslation();
   const [qParams, setQParams] = useQueryParams<QueryParams>();
 
-  const plotColumns = useBreakpoints({ default: 1, md: 2 });
+  const plotColumns = useBreakpoints({ default: 1, lg: 2 });
 
   const { data, isLoading } = useQuery<ObservationPlotConfig>({
     queryKey: ["plots-config"],