Hero editor: scale text-block fonts with the resize handle (#25) #26

wtclaude · 2026-07-03T20:00:06Z

wtclaude commented

2026-07-03 20:00:06 +00:00

Summary

Fixes #25. Makes the Hero editor's text-box resize handle scale the text so editing is WYSIWYG and comfortable.

Previously the text_block corner handle only changed the wrap width — font sizes never tracked the box, so dragging it bigger/smaller left the type the same size. Now the handle acts as a proportional zoom: dragging scales every line's font together, preserving the h1/h2/p size ratios and keeping each line's manually-set baseline.

Changes

scaleFontSize(v, ratio) helper — numeric px sizes (floored at 6px so text never disappears) and simple rem/em/px strings scale by the box ratio; responsive strings like clamp()/vw (the default hero heading) are left untouched so they keep adapting to the viewport.
Resize logic — for text_block, the drag snapshots the starting width + lines and computes ratio = newWidth / baseWidth against the drag origin (no rounding drift mid-drag), then updates the box width and all line fonts together. Multiplying every line by the same ratio preserves the relative sizing.
Canvas hint updated to note the corner handle scales text.

Only HeroEditor.jsx changes — HeroElement.jsx already renders whatever fontSize it's given (number or string), so no change was needed there.

Behavior notes

Baselines stay manually settable per line; the box multiplies on top, so the stored size updates to the new effective value (like scaling a text box in PowerPoint) and becomes the new baseline to tweak.
image/moon resize behavior is unchanged.

Verification

Scaling math unit-checked (proportional scaling, rem unit handling, clamp() preserved, 6px floor).
npm run build passes.
Local stack brought up (DB :3307, server :3000, client :5173) for manual review.

🤖 Generated with Claude Code

## Summary Fixes #25. Makes the Hero editor's text-box resize handle scale the text so editing is WYSIWYG and comfortable. Previously the `text_block` corner handle only changed the wrap width — font sizes never tracked the box, so dragging it bigger/smaller left the type the same size. Now the handle acts as a **proportional zoom**: dragging scales every line's font together, preserving the h1/h2/p size ratios and keeping each line's manually-set baseline. ## Changes - **`scaleFontSize(v, ratio)`** helper — numeric px sizes (floored at 6px so text never disappears) and simple `rem`/`em`/`px` strings scale by the box ratio; responsive strings like `clamp()`/`vw` (the default hero heading) are left untouched so they keep adapting to the viewport. - **Resize logic** — for `text_block`, the drag snapshots the starting width + lines and computes `ratio = newWidth / baseWidth` against the drag origin (no rounding drift mid-drag), then updates the box width and all line fonts together. Multiplying every line by the same ratio preserves the relative sizing. - **Canvas hint** updated to note the corner handle scales text. Only `HeroEditor.jsx` changes — `HeroElement.jsx` already renders whatever `fontSize` it's given (number or string), so no change was needed there. ## Behavior notes - Baselines stay manually settable per line; the box multiplies on top, so the stored size updates to the new effective value (like scaling a text box in PowerPoint) and becomes the new baseline to tweak. - image/moon resize behavior is unchanged. ## Verification - Scaling math unit-checked (proportional scaling, rem unit handling, `clamp()` preserved, 6px floor). - `npm run build` passes. - Local stack brought up (DB :3307, server :3000, client :5173) for manual review. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

wtclaude added 1 commit 2026-07-03 20:00:08 +00:00

Hero editor: scale text block fonts with the resize handle (#25 ) 6af85c30b6

The text_block corner handle previously only changed the wrap width, so
the font size never tracked the box — making the editor un-WYSIWYG and
awkward to tune. Now dragging the handle scales every line's font
proportionally with the box, acting as a zoom that preserves the
h1/h2/p size ratios and keeps each line's manually-set baseline.

- Add scaleFontSize(): numeric px sizes (floored at 6px) and simple
  rem/em/px strings scale by the box ratio; responsive clamp()/vw
  strings are left untouched so the default hero stays fluid.
- Snapshot the box width + lines at drag start so scaling is computed
  against the origin (no rounding drift mid-drag).
- Update the canvas hint to note the handle scales text.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

whitlocktech approved these changes 2026-07-03 20:01:44 +00:00

whitlocktech merged commit d7fb274bad into main

2026-07-03 20:01:52 +00:00

whitlocktech deleted branch enhancement/hero

2026-07-03 20:01:53 +00:00

whitlocktech referenced this issue from a commit

2026-07-03 20:01:53 +00:00

Merge pull request 'Hero editor: scale text-block fonts with the resize handle (#25)' (#26) from enhancement/hero into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: RunicGateway/website#26