fix expand button appearance

vwh · Jul 28, 2024 · 430d4b5 · 430d4b5
1 parent 24c8ed4
commit 430d4b5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 22 deletions.
diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -134,7 +134,7 @@ export default function DBTable() {
         <div className="flex h-full gap-1">
           <TableSelect />
           <Button
-            className="ml-1 hidden md:block"
+            className="expand:block ml-1 hidden"
             onClick={() => setExpandPage(!expandPage)}
             title="Toggle page size"
           >

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,18 +7,21 @@ export default {
     "./pages/**/*.{ts,tsx}",
     "./components/**/*.{ts,tsx}",
     "./app/**/*.{ts,tsx}",
-    "./src/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}"
   ],
   prefix: "",
   theme: {
     container: {
       center: true,
       padding: "2rem",
       screens: {
-        "2xl": "1400px",
-      },
+        "2xl": "1400px"
+      }
     },
     extend: {
+      screens: {
+        expand: "1430px"
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
@@ -27,61 +30,61 @@ export default {
         foreground: "hsl(var(--foreground))",
         primary: {
           DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
+          foreground: "hsl(var(--primary-foreground))"
         },
         secondary: {
           DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
+          foreground: "hsl(var(--secondary-foreground))"
         },
         destructive: {
           DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
+          foreground: "hsl(var(--destructive-foreground))"
         },
         muted: {
           DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
+          foreground: "hsl(var(--muted-foreground))"
         },
         accent: {
           DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+          foreground: "hsl(var(--accent-foreground))"
         },
         popover: {
           DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+          foreground: "hsl(var(--popover-foreground))"
         },
         link: {
-          DEFAULT: "hsl(var(--link))",
+          DEFAULT: "hsl(var(--link))"
         },
         card: {
           DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
+          foreground: "hsl(var(--card-foreground))"
+        }
       },
       borderRadius: {
         lg: "var(--radius)",
         md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
+        sm: "calc(var(--radius) - 4px)"
       },
       keyframes: {
         "accordion-down": {
           from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "var(--radix-accordion-content-height)" }
         },
         "accordion-up": {
           from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
+          to: { height: "0" }
         },
         "circular-reveal": {
           "0%": { "clip-path": "circle(0% at 50% 50%)" },
-          "100%": { "clip-path": "circle(150% at 50% 50%)" },
-        },
+          "100%": { "clip-path": "circle(150% at 50% 50%)" }
+        }
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        "circular-reveal": "circular-reveal 0.3s ease-in-out",
-      },
-    },
+        "circular-reveal": "circular-reveal 0.3s ease-in-out"
+      }
+    }
   },
-  plugins: [tailwindcssAnimate],
+  plugins: [tailwindcssAnimate]
 };