From c9b69de8c0c93d5fd7ba6d14bac52d35f25711a7 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 11 Oct 2023 19:52:45 -0500
Subject: [PATCH] Make admin controls scrollable on mobile

---
 src/admin/AdminNav.tsx           |  4 ++--
 src/components/ChecklistRow.tsx  |  7 ++-----
 src/site/SiteChecklistClient.tsx | 10 ++++------
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/admin/AdminNav.tsx b/src/admin/AdminNav.tsx
index d78c1434..fa381626 100644
--- a/src/admin/AdminNav.tsx
+++ b/src/admin/AdminNav.tsx
@@ -31,7 +31,7 @@ export default function AdminNav({
         )}>
           <div className={cc(
             'flex gap-2 md:gap-4',
-            'flex-grow',
+            'flex-grow overflow-x-scroll',
           )}>
             {items.map(({ label, href, count }) =>
               <Link
@@ -52,7 +52,7 @@ export default function AdminNav({
               ? 'font-bold'
               : 'text-dim'}
           >
-            <BiCog />
+            <BiCog size={16} className="inline-block" />
           </Link>
         </div>
       }
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index b6dc2886..a76ce763 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -19,16 +19,13 @@ export default function ChecklistRow({
     <div className={cc(
       'flex gap-2.5',
       'px-4 pt-2 pb-2.5',
-      'text-left',
     )}>
       <StatusIcon
         type={status ? 'checked' : optional ? 'optional' : 'missing'}
         loading={isPending}
       />
-      <div className="flex flex-col justify-stretch flex-grow w-full">
-        <div className={cc(
-          'font-bold dark:text-gray-300',
-        )}>
+      <div className="flex flex-col min-w-0">
+        <div className="font-bold dark:text-gray-300">
           {title}
           {optional && ' (optional)'}
         </div>
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index 1ce792d4..7a9cefa8 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -94,6 +94,7 @@ export default function SiteChecklistClient({
   const renderEnvVar = (variable: string) =>
     <div
       key={variable}
+      className="overflow-x-scroll"
     >
       <span className="inline-flex items-center gap-1">
         <span className={cc(
@@ -153,12 +154,9 @@ export default function SiteChecklistClient({
           isPending={isPendingPage}
         >
           Store auth secret in environment variable:
-          <div className={cc(
-            'min-w-0 relative',
-            'overflow-x-scroll',
-          )}>
+          <div className="overflow-x-auto">
             <InfoBlock className="my-1.5 inline-flex" padding="tight">
-              <div className="flex items-center gap-4">
+              <div className="flex flex-nowrap items-center gap-4">
                 <span>{secret}</span>
                 <div className="flex items-center gap-0.5">
                   {renderCopyButton('Secret', secret)}
@@ -251,7 +249,7 @@ export default function SiteChecklistClient({
             Check
           </button>
         </div>}
-      <div className="px-10 text-gray-500">
+      <div className="px-11 text-gray-500">
         Changes to environment variables require a redeploy
         or reboot of local dev server
       </div>