From 95bfecb20659c773beb69ba883ec7878d369eec2 Mon Sep 17 00:00:00 2001 From: Eric Wagoner Date: Thu, 27 Aug 2026 15:51:36 -0400 Subject: [PATCH] The preferences read as a ruled ledger Rows rule apart with the games ledger's own brown line, fill the panel's width so the checkbox column aligns, and control rows right-justify their controls opposite their labels. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_015RCWSTnb1KYTPyL4GmhGnF --- packages/web/src/App.svelte | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index 5967b0d..ccffec7 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -2837,11 +2837,15 @@ display: flex; align-items: center; gap: 0.6rem; - margin: 0.55rem 0; + width: 100%; + box-sizing: border-box; + margin: 0; + padding: 0.55rem 0.1rem; font-size: 0.85rem; color: #43331f; text-align: left; cursor: pointer; + border-top: 1.5px solid #6b5a41; } /* Checkboxes wear the table's own ink: a stamp-bordered box, checked solid with a parchment tick — the native widget never matches the @@ -2870,6 +2874,12 @@ font-weight: 700; } .pref-row span { flex: 1; } + /* Control rows read as a two-column table: the label holds the left + column, its controls right-align into the second. */ + .pref-row > span:first-child { flex: 0 1 auto; } + .pref-row > span:first-child + .stamp, + .pref-row > span:first-child + input, + .pref-row > span:first-child + .pref-swatch { margin-left: auto; } .pref-note { font-size: 0.72rem; color: #8a7a5e; margin-top: 0.6rem; } .pref-name { max-width: 11rem; } .pref-swatch {