increased column in 4k display

i0am0arunava · Nov 7, 2024 · b17bfa5 · b17bfa5
1 parent a5cc300
commit b17bfa5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
@@ -42,7 +42,8 @@ interface Props {
 export default function CentralNursingStation({ facilityId }: Props) {
   const breakpointValues = {
     default: 6,
-    fourK: 9,
+    largedisplay: 9,
+    fourK: 10,
   };
   const PER_PAGE_LIMIT = useBreakpoints(breakpointValues);
   const { t } = useTranslation();
@@ -218,7 +219,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
           {t("no_vitals_present")}
         </div>
       ) : (
-        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 fourK:grid-cols-3">
+        <div className="mt-1 grid grid-cols-1 gap-1 lg:grid-cols-2 largedisplay:grid-cols-3 fourk:grid-cols-4">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor

diff --git a/src/hooks/useBreakpoints.ts b/src/hooks/useBreakpoints.ts
@@ -1,6 +1,14 @@
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
-type Breakpoints = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "fourK";
+type Breakpoints =
+  | "sm"
+  | "md"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "fourK"
+  | "largedisplay";
 
 // Ensure that the breakpoint widths are sorted in ascending order.
 const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
@@ -11,6 +19,7 @@ const BREAKPOINT_WIDTH: Record<Breakpoints, number> = {
   "2xl": 1536,
   "3xl": 1920,
   fourK: 2080,
+  largedisplay: 2800,
 };
 
 /**

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -22,7 +22,8 @@ module.exports = {
   theme: {
     extend: {
       screens: {
-        fourK: "130rem", // rem is used insted of pixel
+        largedisplay: "130rem",
+        fourk: "175rem", // rem is used insted of pixel
       },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],