lhumina_code/hero_whiteboard

Fork 0

Calendar widget content does not scale with size — text becomes unreadable when calendar is enlarged #76

New issue

Open

opened 2026-04-27 10:21:36 +00:00 by AhmedHanafy725 · 3 comments

AhmedHanafy725 commented

2026-04-27 10:21:36 +00:00

Member

Bug

When the calendar widget is resized to a larger size, the text content (day names, date numbers, times, header title, view-mode badge) does not scale with the calendar dimensions. Cells (cellW, cellH) grow proportionally with width/height, but font sizes and chrome elements stay fixed, so the content looks tiny inside the enlarged cells and is hard to read.

Reproduction

Open a board, place a Calendar (default 420×340).
Resize the calendar significantly (e.g. drag corner to 900×700+).
Observe the day numbers, day-of-week headers, hour labels, and title remain at their original ~10–13 px size while the cells become very large around them.

Reproducible in all three view modes (month, week, day).

Root cause

In crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js everything in the chrome and content uses hardcoded pixel values:

headerH = 36 (fixed header bar)
Title fontSize: 13, badge fontSize: 9, nav arrows fontSize: 14
Month view: day-name fontSize: 10, date number fontSize: 11, today circle radius: 13
Week view: day header fontSize: 10, time label fontSize: 9
Day view: time label fontSize: 10
Cell horizontal/vertical paddings (8, 16) are fixed

Meanwhile cell sizes are computed from width/height:

var cellW = (width - 16) / 7;
var cellH = Math.max(14, (contentH - 20) / 6);
var hourH = Math.max(10, contentH / 12);

Result: text/cells diverge as the widget grows.

Expected behavior

Text, header height, paddings, and decorative elements (today indicator, current-time marker) should scale with the calendar size so the widget remains readable at any reasonable size, similar to how the other Konva widgets (kanban, mindmap) handle their resize.

A simple approach: derive a scale factor from width/height against the default 420×340 baseline (clamped to a sensible range, e.g. [0.85, 3.0]) and multiply font sizes, header height, today-circle radius, and inner paddings by that factor. The redraw path is already wired up via properties.js, tools.js, and objects.js (resize listeners), so only the renderCalendar/renderMonthView/renderWeekView/renderDayView functions need to become size-aware.

Affected file

crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js

Acceptance criteria

Resizing a calendar (in any view mode) keeps the text readable: day numbers, day names, time labels, and the title scale roughly with cell sizes.
Today's date circle and current-time indicator scale with the layout so they don't look misplaced or comically small/large.
Smaller-than-default sizes (down to the per-view getMinSize() minimums) still look correct — no clipped text or overlapping rows.
All three views (month, week, day) get the same treatment.
No regression in the existing nav-arrow click reliability (the hit rects must continue to work).

## Bug When the calendar widget is resized to a larger size, the text content (day names, date numbers, times, header title, view-mode badge) does not scale with the calendar dimensions. Cells (`cellW`, `cellH`) grow proportionally with `width`/`height`, but font sizes and chrome elements stay fixed, so the content looks tiny inside the enlarged cells and is hard to read. ## Reproduction 1. Open a board, place a Calendar (default 420×340). 2. Resize the calendar significantly (e.g. drag corner to 900×700+). 3. Observe the day numbers, day-of-week headers, hour labels, and title remain at their original ~10–13 px size while the cells become very large around them. Reproducible in all three view modes (`month`, `week`, `day`). ## Root cause In `crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js` everything in the chrome and content uses hardcoded pixel values: - `headerH = 36` (fixed header bar) - Title `fontSize: 13`, badge `fontSize: 9`, nav arrows `fontSize: 14` - Month view: day-name `fontSize: 10`, date number `fontSize: 11`, today circle `radius: 13` - Week view: day header `fontSize: 10`, time label `fontSize: 9` - Day view: time label `fontSize: 10` - Cell horizontal/vertical paddings (`8`, `16`) are fixed Meanwhile cell sizes are computed from `width`/`height`: ```js var cellW = (width - 16) / 7; var cellH = Math.max(14, (contentH - 20) / 6); var hourH = Math.max(10, contentH / 12); ``` Result: text/cells diverge as the widget grows. ## Expected behavior Text, header height, paddings, and decorative elements (today indicator, current-time marker) should scale with the calendar size so the widget remains readable at any reasonable size, similar to how the other Konva widgets (kanban, mindmap) handle their resize. A simple approach: derive a scale factor from `width`/`height` against the default 420×340 baseline (clamped to a sensible range, e.g. `[0.85, 3.0]`) and multiply font sizes, header height, today-circle radius, and inner paddings by that factor. The `redraw` path is already wired up via `properties.js`, `tools.js`, and `objects.js` (resize listeners), so only the `renderCalendar`/`renderMonthView`/`renderWeekView`/`renderDayView` functions need to become size-aware. ## Affected file - `crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js` ## Acceptance criteria - Resizing a calendar (in any view mode) keeps the text readable: day numbers, day names, time labels, and the title scale roughly with cell sizes. - Today's date circle and current-time indicator scale with the layout so they don't look misplaced or comically small/large. - Smaller-than-default sizes (down to the per-view `getMinSize()` minimums) still look correct — no clipped text or overlapping rows. - All three views (`month`, `week`, `day`) get the same treatment. - No regression in the existing nav-arrow click reliability (the hit rects must continue to work).

AhmedHanafy725 commented

2026-04-27 10:23:31 +00:00

Author

Member

Implementation Spec for Issue #76

Objective

Make the calendar widget's content (text, header, decorative elements, paddings) scale with its width/height so it stays readable when resized larger or smaller from the default 420x340 baseline.

Requirements

Text (title, badge, day names, date numbers, time labels, nav arrows) scales with calendar size.
Header height, today-circle radius, current-time marker, and inner paddings scale too.
All three view modes (month, week, day) get the same treatment.
Smaller-than-default sizes (down to per-view getMinSize() minimums) still render correctly.
Nav-arrow hit areas remain clickable at all sizes.
No regression in existing behaviors: dragstart/dragend, view-mode cycling on dblclick, theme support, sync-on-update.

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js - introduce a scale factor and apply it across renderCalendar / renderMonthView / renderWeekView / renderDayView.

Implementation Plan

Step 1: Add a scale factor and apply it across all renderers

Files: crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js

Derive a uniform scale factor inside renderCalendar(group, width, height):

var BASE_W = 420, BASE_H = 340;
var scale = Math.min(width / BASE_W, height / BASE_H);
scale = Math.max(0.85, Math.min(scale, 3.0));

Apply scale to the following currently-hardcoded values:

renderCalendar (header chrome):

headerH: 36 * scale
Title: fontSize: 13 * scale, vertical y offset scales too
Badge: fontSize: 9 * scale, x/y offsets scale
Nav arrow text: fontSize: 14 * scale, x/y offsets scale
Nav hit rects: width: max(32, 40 * scale), height: headerH
Inner content top padding (contentY = headerH + 4): 4 * scale
Inner content bottom padding (contentH = height - headerH - 8): 8 * scale

renderMonthView:

Horizontal padding 8 -> 8 * scale (also affects cellW = (width - 16*scale) / 7)
Day-name fontSize: 10 -> 10 * scale
Day-name y offset matches scaled padding
cellH floor changes from Math.max(14, ...) to Math.max(14 * scale, ...)
Date-number fontSize: 11 -> 11 * scale
textY vertical-center math uses the scaled font height
Today circle: radius: 13 * scale

renderWeekView:

timeW: 40 * scale
Horizontal padding 16 -> 16 * scale
Day header fontSize: 10 -> 10 * scale
hourH floor: Math.max(10 * scale, contentH / 12)
Time label fontSize: 9 -> 9 * scale
y offsets scale

renderDayView:

timeW: 50 * scale
hourH floor: Math.max(10 * scale, contentH / 14)
Hour label fontSize: 10 -> 10 * scale
Now-marker circle radius: 4 * scale, line strokeWidth: 1.5 * scale
y offsets scale

Dependencies: none.

Acceptance Criteria

At default size (420x340) the calendar looks identical to before.
Resizing larger (e.g. 900x700) scales day numbers, day names, time labels, header title, and view-mode badge proportionally.
Today-date circle and current-time indicator scale proportionally so they don't look misplaced or comically small/large.
At minimum sizes from getMinSize() (month 280x260, week 320x220, day 200x280), no text overlaps and rows still fit.
Nav arrow click targets still work (they may scale up but never below the min 32px width).
All three view modes (month, week, day) get the same scaling treatment.
Theme switching still works.
No JS console errors at any size.

Notes

The scale is clamped to [0.85, 3.0] so calendars below default size still look readable (nothing tiny) and very large calendars don't get absurdly huge text.
The clamp uses Math.min(width/BASE_W, height/BASE_H) so neither axis overflows the layout.
This is a single-file UI-side change. No server, SDK, schema, or DB impact. No new dependencies.
Tests: there are no JS unit tests for calendar.js. cargo test --workspace --lib should still pass since this only touches a static asset.

## Implementation Spec for Issue #76 ### Objective Make the calendar widget's content (text, header, decorative elements, paddings) scale with its width/height so it stays readable when resized larger or smaller from the default 420x340 baseline. ### Requirements - Text (title, badge, day names, date numbers, time labels, nav arrows) scales with calendar size. - Header height, today-circle radius, current-time marker, and inner paddings scale too. - All three view modes (`month`, `week`, `day`) get the same treatment. - Smaller-than-default sizes (down to per-view `getMinSize()` minimums) still render correctly. - Nav-arrow hit areas remain clickable at all sizes. - No regression in existing behaviors: dragstart/dragend, view-mode cycling on dblclick, theme support, sync-on-update. ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js` - introduce a scale factor and apply it across `renderCalendar` / `renderMonthView` / `renderWeekView` / `renderDayView`. ### Implementation Plan #### Step 1: Add a scale factor and apply it across all renderers Files: `crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js` Derive a uniform scale factor inside `renderCalendar(group, width, height)`: ```js var BASE_W = 420, BASE_H = 340; var scale = Math.min(width / BASE_W, height / BASE_H); scale = Math.max(0.85, Math.min(scale, 3.0)); ``` Apply `scale` to the following currently-hardcoded values: **`renderCalendar` (header chrome):** - `headerH`: `36 * scale` - Title: `fontSize: 13 * scale`, vertical y offset scales too - Badge: `fontSize: 9 * scale`, x/y offsets scale - Nav arrow text: `fontSize: 14 * scale`, x/y offsets scale - Nav hit rects: `width: max(32, 40 * scale)`, `height: headerH` - Inner content top padding (`contentY = headerH + 4`): `4 * scale` - Inner content bottom padding (`contentH = height - headerH - 8`): `8 * scale` **`renderMonthView`:** - Horizontal padding `8` -> `8 * scale` (also affects `cellW = (width - 16*scale) / 7`) - Day-name `fontSize: 10` -> `10 * scale` - Day-name y offset matches scaled padding - `cellH` floor changes from `Math.max(14, ...)` to `Math.max(14 * scale, ...)` - Date-number `fontSize: 11` -> `11 * scale` - `textY` vertical-center math uses the scaled font height - Today circle: `radius: 13 * scale` **`renderWeekView`:** - `timeW: 40 * scale` - Horizontal padding `16` -> `16 * scale` - Day header `fontSize: 10` -> `10 * scale` - `hourH` floor: `Math.max(10 * scale, contentH / 12)` - Time label `fontSize: 9` -> `9 * scale` - y offsets scale **`renderDayView`:** - `timeW: 50 * scale` - `hourH` floor: `Math.max(10 * scale, contentH / 14)` - Hour label `fontSize: 10` -> `10 * scale` - Now-marker circle `radius: 4 * scale`, line `strokeWidth: 1.5 * scale` - y offsets scale Dependencies: none. ### Acceptance Criteria - [ ] At default size (420x340) the calendar looks identical to before. - [ ] Resizing larger (e.g. 900x700) scales day numbers, day names, time labels, header title, and view-mode badge proportionally. - [ ] Today-date circle and current-time indicator scale proportionally so they don't look misplaced or comically small/large. - [ ] At minimum sizes from `getMinSize()` (month 280x260, week 320x220, day 200x280), no text overlaps and rows still fit. - [ ] Nav arrow click targets still work (they may scale up but never below the min 32px width). - [ ] All three view modes (`month`, `week`, `day`) get the same scaling treatment. - [ ] Theme switching still works. - [ ] No JS console errors at any size. ### Notes - The scale is clamped to `[0.85, 3.0]` so calendars below default size still look readable (nothing tiny) and very large calendars don't get absurdly huge text. - The clamp uses `Math.min(width/BASE_W, height/BASE_H)` so neither axis overflows the layout. - This is a single-file UI-side change. No server, SDK, schema, or DB impact. No new dependencies. - Tests: there are no JS unit tests for calendar.js. `cargo test --workspace --lib` should still pass since this only touches a static asset.

AhmedHanafy725 commented

2026-04-27 10:30:05 +00:00

Author

Member

Test Results

cargo test --workspace --lib: 4 lib targets ran (hero_whiteboard_app, hero_whiteboard_examples, hero_whiteboard_sdk, hero_whiteboard_ui), 0 tests / 0 passed / 0 failed each (no Rust unit tests for these crates).
cargo clippy --workspace -- -D warnings: clean (no warnings).
cargo check --workspace: clean.
node --check calendar.js: parses cleanly.

Note: the change only touches a static JS asset (crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js); there are no JS unit tests in the repo and no Rust code paths changed. Visual verification by resizing a calendar in the running UI is the recommended manual check.

## Test Results - `cargo test --workspace --lib`: 4 lib targets ran (hero_whiteboard_app, hero_whiteboard_examples, hero_whiteboard_sdk, hero_whiteboard_ui), 0 tests / 0 passed / 0 failed each (no Rust unit tests for these crates). - `cargo clippy --workspace -- -D warnings`: clean (no warnings). - `cargo check --workspace`: clean. - `node --check calendar.js`: parses cleanly. Note: the change only touches a static JS asset (`crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js`); there are no JS unit tests in the repo and no Rust code paths changed. Visual verification by resizing a calendar in the running UI is the recommended manual check.

AhmedHanafy725 commented

2026-04-27 10:30:40 +00:00

Author

Member

Implementation Summary

Changes

crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js (+70 / -47 lines)
- Added a uniform scale factor in renderCalendar: scale = clamp(min(width/420, height/340), 0.85, 3.0).
- Header height, title, badge, nav-arrow text, and inner paddings now multiply by scale. Nav hit-rect width is floored at 32 px so it stays clickable when scale < 1.
- Title, badge, and nav arrows are now vertically centered against the scaled header height so they no longer drift.
- renderMonthView, renderWeekView, renderDayView accept scale and apply it to font sizes, paddings, time-gutter widths, hour-row floor, today-circle radius, and the now-marker line / dot.
- Today indicator is centered on the scaled day-number text rather than a hardcoded 6 px offset.

Verification

cargo test --workspace --lib passes (4 lib targets, 0 tests).
cargo clippy --workspace -- -D warnings clean.
node --check calendar.js parses cleanly.

Notes / caveats

No Rust code changed; this is a static-asset-only fix.
The scale clamp [0.85, 3.0] keeps the original look at default 420x340 (scale=1) and prevents both tiny-text-at-min-size and absurd-text-at-very-large-size.
View-mode cycling (dblclick), nav-arrow click handling, dragstart/dragend, theme switching, and sync-on-update are all preserved (only render-time visuals were touched).
Manual visual check in the running UI is recommended at default, ~700x550, ~1000x800, and at each per-view minimum from getMinSize().

## Implementation Summary ### Changes - `crates/hero_whiteboard_ui/static/web/js/whiteboard/calendar.js` (+70 / -47 lines) - Added a uniform scale factor in `renderCalendar`: `scale = clamp(min(width/420, height/340), 0.85, 3.0)`. - Header height, title, badge, nav-arrow text, and inner paddings now multiply by `scale`. Nav hit-rect width is floored at 32 px so it stays clickable when scale < 1. - Title, badge, and nav arrows are now vertically centered against the scaled header height so they no longer drift. - `renderMonthView`, `renderWeekView`, `renderDayView` accept `scale` and apply it to font sizes, paddings, time-gutter widths, hour-row floor, today-circle radius, and the now-marker line / dot. - Today indicator is centered on the scaled day-number text rather than a hardcoded 6 px offset. ### Verification - `cargo test --workspace --lib` passes (4 lib targets, 0 tests). - `cargo clippy --workspace -- -D warnings` clean. - `node --check calendar.js` parses cleanly. ### Notes / caveats - No Rust code changed; this is a static-asset-only fix. - The scale clamp `[0.85, 3.0]` keeps the original look at default 420x340 (scale=1) and prevents both tiny-text-at-min-size and absurd-text-at-very-large-size. - View-mode cycling (dblclick), nav-arrow click handling, dragstart/dragend, theme switching, and sync-on-update are all preserved (only render-time visuals were touched). - Manual visual check in the running UI is recommended at default, ~700x550, ~1000x800, and at each per-view minimum from `getMinSize()`.