Make admin controls scrollable on mobile

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>
       }

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>

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>