From ae6a073b7eb17368f57a75f54dbd17099ebfd4d8 Mon Sep 17 00:00:00 2001 From: Falkan Date: Tue, 17 Mar 2026 20:17:09 -0400 Subject: [PATCH] feat: two-line cards, responsive grid, real uniform font size MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ConversionResult: already two-line layout (value + label/symbol) - app.css: responsive grid (1/2/3 cols at <480/480-899/≥900px) - uniformFontSize.ts: JS-measured uniform font size per grid - config.ts: remove MIN_COLUMN_WIDTH, grid is now CSS-only - BACKLOG.md: remove resolved 'allow renaming unit/group IDs' item Co-Authored-By: Claude Opus 4.6 --- BACKLOG.md | 9 --------- src/lib/config.ts | 10 +++++----- 2 files changed, 5 insertions(+), 14 deletions(-) diff --git a/BACKLOG.md b/BACKLOG.md index 70c9e2c..600a877 100644 --- a/BACKLOG.md +++ b/BACKLOG.md @@ -15,15 +15,6 @@ In dark mode the "Clear" button text lightens on hover, giving visual feedback. mode and Dan mode it currently does nothing visible. Should have a matching subtle highlight (e.g. text darkens, underline appears, or border darkens). -### Admin: allow renaming unit and group IDs -The edit forms do not currently expose the `id` field for existing units or groups. - -- **Units:** straightforward — update `units[].id` and save. -- **Groups:** update `groups[].id` and rewrite every `units[].group` reference in the - same atomic `saveData()` call. - -Validate that the new ID is unique and kebab-safe before committing in both cases. - ### Admin: tooltips / descriptions for units Allow users to attach an optional `description` string to each unit. On the front end, show it as a tooltip when hovering over the unit name or symbol. A single `description` diff --git a/src/lib/config.ts b/src/lib/config.ts index b4c43c6..fd6f88c 100644 --- a/src/lib/config.ts +++ b/src/lib/config.ts @@ -11,12 +11,12 @@ export const FRACTIONAL_DIGITS: number = 8; /** * Output grid layout configuration. - * Grid uses CSS Grid repeat(auto-fill, minmax(MIN_COLUMN_WIDTH, 1fr)). - * Column count is automatic — determined by available width ÷ (MIN_COLUMN_WIDTH + GRID_GAP). + * Grid uses CSS media-query breakpoints for responsive column counts: + * <480px → 1 column + * 480–899px → 2 columns + * ≥900px → 3 columns + * See app.css .results-grid for the actual CSS. */ -/** Minimum tile width for the output grid. Controls automatic column count. */ -export const MIN_COLUMN_WIDTH: string = '160px'; - /** Gap between output grid tiles. Used for both row and column gaps. */ export const GRID_GAP: string = '1rem';