Text overflow-x-auto

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] ',

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',
+            'flex-grow overflow-x-auto',
-            '[&::-webkit-scrollbar]:hidden',
           )}>
             {items.map(({ label, href, count }) =>
               <Link

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',
       )}
     >

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
+  } */
 }