fix(ui): landscape zoom two-step (sync both axes) + fixed rack tile size
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 56s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Failing after 2m35s
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 56s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Failing after 2m35s
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.
This commit is contained in:
@@ -121,9 +121,12 @@
|
||||
container-type: inline-size;
|
||||
}
|
||||
.rack.landscape .tile {
|
||||
flex: 1 1 0;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
/* Fixed tile size (1/7 of the fixed-width rack, accounting for the six 5px gaps), NOT flex-grow:
|
||||
so placing a tile leaves the remaining ones put instead of growing them to refill the row —
|
||||
matching the portrait rack. The constant rack width also keeps the cqw glyphs above steady as
|
||||
tiles leave. */
|
||||
flex: 0 0 auto;
|
||||
width: calc((100% - 6 * 5px) / 7);
|
||||
max-width: 46px;
|
||||
}
|
||||
.rack.landscape .letter {
|
||||
|
||||
Reference in New Issue
Block a user