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:
parent
e9cf2daf10
commit
d7362ec755
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user