feat: two-line cards, responsive grid, real uniform font size

- 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 <noreply@anthropic.com>
This commit is contained in:
Falkan
2026-03-17 20:17:09 -04:00
parent af83263520
commit ae6a073b7e
2 changed files with 5 additions and 14 deletions

View File

@@ -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`

View File

@@ -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
* 480899px → 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';