From d7362ec755680e3c7d0396f6352794ac293c259f Mon Sep 17 00:00:00 2001
From: metatroncubeswdev <info@metatroncubesolutions.com>
Date: Wed, 14 Oct 2026 11:26:35 -0400
Subject: [PATCH] Home setup checklist: keep icon, text and action in fixed
 columns

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 app/routes/app._index.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/routes/app._index.tsx b/app/routes/app._index.tsx
index fdfe35b..aee2121 100644
--- a/app/routes/app._index.tsx
+++ b/app/routes/app._index.tsx
@@ -103,16 +103,15 @@ export default function Home() {
         <s-section heading={`Setup: ${doneCount} of ${steps.length} done`}>
           <s-stack gap="base">
             {steps.map((s) => (
-              <s-stack key={s.label} direction="inline" gap="base" alignItems="center" justifyContent="space-between">
-                <s-stack direction="inline" gap="small-200" alignItems="center">
-                  <s-icon type={s.done ? "check-circle" : "circle"} tone={s.done ? "success" : "neutral"} />
-                  <s-stack gap="small-500">
-                    <s-text type="strong">{s.label}</s-text>
-                    <s-text color="subdued">{s.help}</s-text>
-                  </s-stack>
+              /* icon | text | action in fixed columns, so long help text wraps inside its column */
+              <s-grid key={s.label} gridTemplateColumns="auto 1fr auto" gap="base" alignItems="center">
+                <s-icon type={s.done ? "check-circle" : "circle"} tone={s.done ? "success" : "neutral"} />
+                <s-stack gap="small-500">
+                  <s-text type="strong">{s.label}</s-text>
+                  <s-text color="subdued">{s.help}</s-text>
                 </s-stack>
-                {s.done ? null : s.action}
-              </s-stack>
+                {s.done ? <span /> : s.action}
+              </s-grid>
             ))}
           </s-stack>
         </s-section>