Home setup checklist: keep icon, text and action in fixed columns

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
metatroncubeswdev 2026-10-14 11:26:35 -04:00
parent e9cf2daf10
commit d7362ec755

View File

@ -103,16 +103,15 @@ export default function Home() {
<s-section heading={`Setup: ${doneCount} of ${steps.length} done`}> <s-section heading={`Setup: ${doneCount} of ${steps.length} done`}>
<s-stack gap="base"> <s-stack gap="base">
{steps.map((s) => ( {steps.map((s) => (
<s-stack key={s.label} direction="inline" gap="base" alignItems="center" justifyContent="space-between"> /* icon | text | action in fixed columns, so long help text wraps inside its column */
<s-stack direction="inline" gap="small-200" alignItems="center"> <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-icon type={s.done ? "check-circle" : "circle"} tone={s.done ? "success" : "neutral"} />
<s-stack gap="small-500"> <s-stack gap="small-500">
<s-text type="strong">{s.label}</s-text> <s-text type="strong">{s.label}</s-text>
<s-text color="subdued">{s.help}</s-text> <s-text color="subdued">{s.help}</s-text>
</s-stack>
</s-stack> </s-stack>
{s.done ? null : s.action} {s.done ? <span /> : s.action}
</s-stack> </s-grid>
))} ))}
</s-stack> </s-stack>
</s-section> </s-section>