From 0b3498ad0c48d06f52c8e60a05d16f124760cca1 Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Sat, 9 Nov 2024 15:40:49 +0530
Subject: [PATCH] use container queries

---
 src/components/Facility/CentralNursingStation.tsx | 3 ++-
 tailwind.config.js                                | 4 ----
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Facility/CentralNursingStation.tsx b/src/components/Facility/CentralNursingStation.tsx
index 22b70abff86..f3bb4f2be53 100644
--- a/src/components/Facility/CentralNursingStation.tsx
+++ b/src/components/Facility/CentralNursingStation.tsx
@@ -85,6 +85,7 @@ export default function CentralNursingStation({ facilityId }: Props) {
       noImplicitPadding
       breadcrumbs={false}
       collapseSidebar
+      className="@container"
       options={
         <div className="flex flex-row-reverse items-center gap-4 md:flex-row">
           <Pagination
@@ -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 4xl:grid-cols-3 4k:grid-cols-6">
+        <div className="mt-1 grid grid-cols-1 gap-1 @5xl:grid-cols-2 @7xl:grid-cols-3 @[140rem]:grid-cols-4 @[180rem]:grid-cols-5 @[240rem]:grid-cols-6">
           {data.map((props, i) => (
             <div className="overflow-hidden text-clip" key={i}>
               <HL7PatientVitalsMonitor
diff --git a/tailwind.config.js b/tailwind.config.js
index 9134802d525..32b25642022 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,10 +20,6 @@ module.exports = {
   darkMode: ["class"],
   theme: {
     extend: {
-      screens: {
-        "4xl": "2560px",
-        "4k": "3840px",
-      },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],
       },