From 80aaaf9ad8baa3a243576560d24939c3ae70210f Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 11 Oct 2023 13:06:45 -0500
Subject: [PATCH] Refactor checklist width tree

---
 src/components/ChecklistRow.tsx  |  2 +-
 src/components/InfoBlock.tsx     |  2 +-
 src/site/SiteChecklistClient.tsx | 33 ++++++++++++++++++--------------
 3 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index e0748fdb..b6dc2886 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -25,7 +25,7 @@ export default function ChecklistRow({
         type={status ? 'checked' : optional ? 'optional' : 'missing'}
         loading={isPending}
       />
-      <div className="flex flex-col justify-stretch flex-grow">
+      <div className="flex flex-col justify-stretch flex-grow w-full">
         <div className={cc(
           'font-bold dark:text-gray-300',
         )}>
diff --git a/src/components/InfoBlock.tsx b/src/components/InfoBlock.tsx
index cad3c539..8fc31593 100644
--- a/src/components/InfoBlock.tsx
+++ b/src/components/InfoBlock.tsx
@@ -28,7 +28,7 @@ export default function InfoBlock({
       className,
     )}>
       <div className={cc(
-        'flex flex-col items-center justify-center',
+        'flex flex-col items-center justify-center w-full',
         'space-y-4',
         'text-gray-500 dark:text-gray-400',
       )}>
diff --git a/src/site/SiteChecklistClient.tsx b/src/site/SiteChecklistClient.tsx
index a001d164..1ce792d4 100644
--- a/src/site/SiteChecklistClient.tsx
+++ b/src/site/SiteChecklistClient.tsx
@@ -113,7 +113,7 @@ export default function SiteChecklistClient({
     </div>;
 
   return (
-    <div className="text-sm max-w-xl space-y-6">
+    <div className="text-sm max-w-xl space-y-6 w-full">
       <Checklist
         title="Storage"
         icon={<BiData size={16} />}
@@ -153,20 +153,25 @@ export default function SiteChecklistClient({
           isPending={isPendingPage}
         >
           Store auth secret in environment variable:
-          <InfoBlock className="my-1.5 inline-flex" padding="tight">
-            <div className="flex items-center gap-4">
-              <span>{secret}</span>
-              <div className="flex items-center gap-0.5">
-                {renderCopyButton('Secret', secret)}
-                <IconButton
-                  icon={<BiRefresh size={18} />}
-                  onClick={refreshSecret}
-                  isLoading={isPendingSecret}
-                  spinnerColor="text"
-                />
+          <div className={cc(
+            'min-w-0 relative',
+            'overflow-x-scroll',
+          )}>
+            <InfoBlock className="my-1.5 inline-flex" padding="tight">
+              <div className="flex items-center gap-4">
+                <span>{secret}</span>
+                <div className="flex items-center gap-0.5">
+                  {renderCopyButton('Secret', secret)}
+                  <IconButton
+                    icon={<BiRefresh size={18} />}
+                    onClick={refreshSecret}
+                    isLoading={isPendingSecret}
+                    spinnerColor="text"
+                  />
+                </div>
               </div>
-            </div>
-          </InfoBlock>
+            </InfoBlock>
+          </div>
           {renderEnvVars(['AUTH_SECRET'])}
         </ChecklistRow>
         <ChecklistRow