fix(kanban): scale card and column font sizes with resize state #64

Merged

AhmedHanafy725 merged 1 commit from development_kanban_font_scale_with_size into development

2026-04-23 09:33:58 +00:00

AhmedHanafy725 commented

2026-04-23 09:12:54 +00:00

Member

Summary

Kanban card text, 3-dot menu glyph, column titles, and the +Add card button now scale proportionally with cardHeight / colWidth. Previously they were hardcoded (11, 14, 12, 11), so on a resized kanban the text looked tiny relative to the cells.

Closes #51

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js
- New file-local clampFont(v, min, max) helper that rounds and clamps a derived font size.
- renderColumn: derives titleFs = clampFont(colW * 0.04 + 4, 10, 18) and addFs = clampFont(colW * 0.035 + 4, 9, 16), applied to colTitle and the +Add card button.
- renderCard: derives textFs = clampFont(cardH * 0.25, 9, 20) and menuFs = clampFont(cardH * 0.32, 10, 24), applied to cardText and menuBtn. Vertical placement uses a cardH <= 48 ? legacy : centered branch so cards at the default height keep exact pixel parity (textY=8, menuY=15) while larger cards center their glyphs.

Default parity

All formulas produce the previous hardcoded values at default colWidth=200 / cardHeight=44 (12, 11, 11, 14), so existing kanbans render identically on first load. A continuous centering formula would shift every existing card's text by ~8 px, which is deliberately avoided.

Out of scope

Non-scaling text preserved: the top "Kanban Board" meta label, the right-side +Column button, and the per-column x delete glyph.
No changes to state schema, sync, history, or any other file. Font sizes are derived per-render, never persisted.

Test Results

cargo check --workspace: pass
cargo test --workspace --lib: pass
cargo clippy --workspace -- -D warnings: pass
cargo fmt --check: pass

Manual QA against a running UI required to confirm visual scaling across resize, default parity on load, and readability at the 22-min cardHeight floor.

## Summary Kanban card text, 3-dot menu glyph, column titles, and the +Add card button now scale proportionally with `cardHeight` / `colWidth`. Previously they were hardcoded (11, 14, 12, 11), so on a resized kanban the text looked tiny relative to the cells. ## Related Issue Closes https://forge.ourworld.tf/lhumina_code/hero_whiteboard/issues/51 ## Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` - New file-local `clampFont(v, min, max)` helper that rounds and clamps a derived font size. - `renderColumn`: derives `titleFs = clampFont(colW * 0.04 + 4, 10, 18)` and `addFs = clampFont(colW * 0.035 + 4, 9, 16)`, applied to `colTitle` and the +Add card button. - `renderCard`: derives `textFs = clampFont(cardH * 0.25, 9, 20)` and `menuFs = clampFont(cardH * 0.32, 10, 24)`, applied to `cardText` and `menuBtn`. Vertical placement uses a `cardH <= 48 ? legacy : centered` branch so cards at the default height keep exact pixel parity (`textY=8`, `menuY=15`) while larger cards center their glyphs. ## Default parity All formulas produce the previous hardcoded values at default `colWidth=200` / `cardHeight=44` (12, 11, 11, 14), so existing kanbans render identically on first load. A continuous centering formula would shift every existing card's text by ~8 px, which is deliberately avoided. ## Out of scope - Non-scaling text preserved: the top "Kanban Board" meta label, the right-side +Column button, and the per-column x delete glyph. - No changes to state schema, sync, history, or any other file. Font sizes are derived per-render, never persisted. ## Test Results - `cargo check --workspace`: pass - `cargo test --workspace --lib`: pass - `cargo clippy --workspace -- -D warnings`: pass - `cargo fmt --check`: pass Manual QA against a running UI required to confirm visual scaling across resize, default parity on load, and readability at the 22-min cardHeight floor.

AhmedHanafy725 added 1 commit

2026-04-23 09:12:54 +00:00

fix(kanban): scale card and column font sizes with resize state

CI / build (pull_request) Successful in 2m6s

Details

079a6bd397

Card text and the 3-dot menu glyph scale with cardHeight; column
titles and the +Add card button scale with colWidth. All formulas
are calibrated to produce the previous hardcoded values at the
default sizes (colWidth 200, cardHeight 44) so existing kanbans
do not visually shift on load. A cardH <= 48 branch preserves
exact pixel parity for card-text and menu-glyph positioning at
default card heights while vertically centering glyphs on larger
cards.

#51