From 14fdc070c54a8eeffbff99dbf6cc9712c0f186eb Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sat, 23 Mar 2024 11:05:04 -0500
Subject: [PATCH] Text overflow-x-auto

---
 src/admin/AdminGrid.tsx          |  2 +-
 src/admin/AdminNav.tsx           |  3 +--
 src/site/SiteChecklistClient.tsx |  2 +-
 src/site/globals.css             | 10 ++++++++++
 4 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/admin/AdminGrid.tsx b/src/admin/AdminGrid.tsx
index b1a1511b..897884eb 100644
--- a/src/admin/AdminGrid.tsx
+++ b/src/admin/AdminGrid.tsx
@@ -14,7 +14,7 @@ export default function AdminGrid ({
         {title}
       </div>}
     {/* py-[1px] fixes Safari vertical scroll bug */}
-    <div className="min-w-[14rem] overflow-x-scroll py-[1px]">
+    <div className="min-w-[14rem] overflow-x-scroll hide-scrollbar py-[1px]">
       <div className={clsx(
         'w-full',
         'grid grid-cols-[auto_1fr_auto] ',
diff --git a/src/admin/AdminNav.tsx b/src/admin/AdminNav.tsx
index 16049a49..9e7a4e53 100644
--- a/src/admin/AdminNav.tsx
+++ b/src/admin/AdminNav.tsx
@@ -31,8 +31,7 @@ export default function AdminNav({
         )}>
           <div className={clsx(
             'flex gap-2 md:gap-4',
-            'flex-grow overflow-x-scroll',
-            '[&::-webkit-scrollbar]:hidden',
+            'flex-grow overflow-x-auto',
           )}>
             {items.map(({ label, href, count }) =>
               <Link
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 5d4d52c7..377623a3 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -105,7 +105,7 @@ export default function SiteChecklistClient({
     <div
       key={variable}
       className={clsx(
-        'overflow-x-scroll overflow-y-hidden',
+        'overflow-x-scroll hide-scrollbar overflow-y-hidden',
         minimal && 'inline-flex',
       )}
     >
diff --git a/src/site/globals.css b/src/site/globals.css
index 9803be2a..474551b7 100644
--- a/src/site/globals.css
+++ b/src/site/globals.css
@@ -159,4 +159,14 @@
     @apply
       bg-gray-900 dark:bg-gray-100
   }
+  /* Common Utilities: Scrollbars */
+  /* Explicitly hide scrollbars on Windows */
+  /* .hide-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  .hide-scrollbar::-webkit-scrollbar {
+    @apply
+      hidden
+  } */
 }