use container queries

i0am0arunava · Nov 9, 2024 · 0b3498a · 0b3498a
1 parent d306037
commit 0b3498a
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 5 deletions.
diff --git 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
@@ -20,10 +20,6 @@ module.exports = {
   darkMode: ["class"],
   theme: {
     extend: {
-      screens: {
-        "4xl": "2560px",
-        "4k": "3840px",
-      },
       fontFamily: {
         sans: ["Figtree", "sans-serif"],
       },