fix(ui): landscape board zoom/pan + rack tile rendering + mobile block label #141

Merged

developer merged 3 commits from fix/landscape-board-ui into development 2026-06-29 19:11:05 +00:00

Conversation 1 Commits 3 Files Changed 4

+118 -15

developer commented 2026-06-27 11:46:47 +00:00

Owner

Copy Link

Copy Source

General UI bugs surfaced while testing the VK Mini App but present on every platform (verified across browsers — not VK-specific). Group A of the VK follow-up; VK-specific polish (theme/share/home-bar) lands in a separate PR.

Fixes

• Rack tile rendering (#4): the letter used a fixed rem size, so in landscape — where tiles shrink below 46px in the narrow left panel — it overflowed the tile and dropped into the bottom-left corner (unlike the board, whose labels scale). Now sized relative to the rack with cqw (the tile's own container-query size resolves unreliably under flex + aspect-ratio, so the rack is the query container). Verified numerically + visually (no overflow, letter top-left, scales 30→46px tiles); portrait untouched.
• Landscape zoom "two-step" (#2): the per-frame clamp-to-max reached the wide axis (large clientWidth) before the tall one. Now interpolates both scroll axes together by time over the grow/shrink transition; settles on zoom-out too. Verified the zoom ends centred on the focused cell.
• Mouse pan of the zoomed board (#3): touch scrolls the overflow:auto viewport natively, but a mouse cannot drag-scroll a div, so the magnified board could not be moved on desktop / the landscape iframe. Added a drag-to-pan handler — active only while zoomed, off pending tiles, past a small threshold, swallowing the trailing click.
• Block label (#1): in-game block-confirm ru Блокируем? → В бан? (the long form overflowed the seat score chip on mobile).

Verify

Local: svelte-check 0, unit 342, build, bundle-gate 96.0/100. Reproduced + fixed #2/#4 in the mock app via Playwright (landscape).

Needs your live cross-browser check: the feel of the landscape zoom animation (#2) and the mouse drag-pan (#3) — those interactions aren't reproducible in my headless setup (like the iOS gestures). Everything else is verified.

General UI bugs surfaced while testing the VK Mini App but present on **every** platform (verified across browsers — not VK-specific). Group A of the VK follow-up; VK-specific polish (theme/share/home-bar) lands in a separate PR. ## Fixes - **Rack tile rendering (#4)**: the letter used a fixed `rem` size, so in landscape — where tiles shrink below 46px in the narrow left panel — it overflowed the tile and dropped into the bottom-left corner (unlike the board, whose labels scale). Now sized relative to the rack with `cqw` (the tile's own container-query size resolves unreliably under flex + aspect-ratio, so the rack is the query container). Verified numerically + visually (no overflow, letter top-left, scales 30→46px tiles); portrait untouched. - **Landscape zoom "two-step" (#2)**: the per-frame clamp-to-max reached the wide axis (large clientWidth) before the tall one. Now interpolates both scroll axes together by time over the grow/shrink transition; settles on zoom-out too. Verified the zoom ends centred on the focused cell. - **Mouse pan of the zoomed board (#3)**: touch scrolls the `overflow:auto` viewport natively, but a mouse cannot drag-scroll a div, so the magnified board could not be moved on desktop / the landscape iframe. Added a drag-to-pan handler — active only while zoomed, off pending tiles, past a small threshold, swallowing the trailing click. - **Block label (#1)**: in-game block-confirm ru `Блокируем?` → `В бан?` (the long form overflowed the seat score chip on mobile). ## Verify Local: svelte-check 0, unit 342, build, bundle-gate 96.0/100. Reproduced + fixed #2/#4 in the mock app via Playwright (landscape). **Needs your live cross-browser check**: the *feel* of the landscape zoom animation (#2) and the mouse drag-pan (#3) — those interactions aren't reproducible in my headless setup (like the iOS gestures). Everything else is verified.

developer added 1 commit 2026-06-27 11:46:47 +00:00

fix(ui): landscape board zoom/pan + rack tile rendering, shorter mobile block label ... 500a01cf97

Bugs surfaced while testing in VK but present on every platform (verified across
browsers, not VK-specific):

- Rack tiles: the letter used a fixed rem size, so in landscape — where tiles shrink
  below 46px in the narrow left panel — it overflowed and dropped into the bottom-left
  corner. Size it relative to the rack (cqw, like the board's labels; the tile's own
  container-query size resolves unreliably under flex + aspect-ratio).
- Landscape board zoom positioned "in two steps": the per-frame clamp-to-max reached
  the wide axis before the tall one. Interpolate both scroll axes together by time over
  the grow/shrink transition instead (settles on zoom-out too).
- The zoomed board could not be panned with a mouse (touch scrolls the overflow:auto
  viewport natively; a mouse cannot drag-scroll a div). Add a drag-to-pan handler, active
  only while zoomed, off pending tiles, past a small movement threshold, swallowing the
  trailing click so it does not also act on a cell.
- Shorten the in-game block-confirm label ru "Блокируем?" -> "В бан?" (the long form
  overflowed the seat score chip on mobile).

developer added 1 commit 2026-06-29 18:34:04 +00:00

fix(ui): landscape zoom two-step (sync both axes) + fixed rack tile size ... a88678c5c6

Follow-up to the contour review of the landscape fixes:

- Zoom still positioned "in two steps": a wide viewport overflows vertically as soon as
  the square board grows past its height, but horizontally only once it grows past the
  (much wider) width — so the browser pins scrollLeft to 0 while the vertical axis
  already pans (no time/ease tween fixes it; the horizontal scroll range physically is
  not there yet). Found by instrumenting the scroll trajectory. Now drive both axes by
  one progress = how far the board has grown past the viewport width (when a horizontal
  pan first becomes possible): until then the board just zooms centred, past it both
  axes pan together in one diagonal motion. Also disable scroll-anchoring so the browser
  stops fighting the programmatic scroll mid-transition. Re-verified: both axes now
  start and move together.
- Rack tiles resized when a tile was placed: landscape used flex-grow, so removing a
  tile regrew the rest. Give them a fixed size (1/7 of the fixed-width rack), like the
  portrait rack, so placing a tile leaves the rest put.

developer added 1 commit 2026-06-29 18:54:45 +00:00

fix(ui): pin the landscape confirm button into the freed tile slot ... a06dfe00fc

Follow-up to the contour review: with the rack now exactly seven fixed-size slots in the
narrow landscape panel, the 56px confirm button (sized for the roomy portrait rack) was
wider than the single slot a staged tile frees, so it overlapped the now-rightmost tile.
Match the button width to one landscape tile slot, so it sits inside the freed slot with
its right edge level with the rack's right edge — the mirror of the first tile's left edge.

owner approved these changes 2026-06-29 19:10:40 +00:00

developer merged commit 303348ed39 into development 2026-06-29 19:11:05 +00:00

developer deleted branch fix/landscape-board-ui 2026-06-29 19:11:05 +00:00

developer referenced this pull request 2026-06-30 05:35:08 +00:00

release: VK Mini App + landscape UI + dict v1.3.1 seed (development→master) #144

developer referenced this issue from a commit 2026-06-30 05:51:30 +00:00

docs: correct VK invite-link reality + note desktop board drag-to-pan

developer referenced this pull request 2026-06-30 05:51:39 +00:00

docs: sync FUNCTIONAL/UI_DESIGN/.claude with the shipped VK + landscape behaviour (#140-#142 follow-up) #145

Sign in to join this conversation.

Reviewers

No Reviewers

owner

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

owner (Ilia) developer

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/scrabble-game#141