Stage 7 polish (round 3): zoom magnifies labels, popover edge-anchor, flash x2
Tests · UI / test (push) Successful in 12s
Tests · Go / test (pull_request) Successful in 6s
Tests · Integration / integration (pull_request) Successful in 11s
Tests · UI / test (pull_request) Successful in 11s

- item 5: move container-type to the zoom-scaled .scaler so cqw labels grow WITH the board (magnifying-glass zoom); new e2e measures the font grows ~1.85x
- item 8: confirm popovers anchor to the trigger's right edge (no longer run off-screen)
- item 9: last-word flash runs 2 cycles then settles to normal (was infinite)
This commit is contained in:
Ilia Denisov
2026-06-03 15:52:28 +02:00
parent 3312130483
commit 10d48884ac
3 changed files with 33 additions and 5 deletions
+1 -2
View File
@@ -92,8 +92,7 @@
.popover {
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
right: 0;
z-index: 19;
display: flex;
flex-direction: column;
+6 -3
View File
@@ -84,7 +84,7 @@
class="cell {premClass[premium[r][c]]}"
class:filled={!!cell}
class:pending={!!p && !cell}
class:hl={!!cell && highlight.has(key(r, c))}
class:hl={!!cell && highlight.has(key(r, c)) && !flash}
class:flash={!!cell && flash && highlight.has(key(r, c))}
data-cell
data-row={r}
@@ -115,14 +115,16 @@
overflow: hidden;
background: var(--board-bg);
border-radius: var(--radius-sm);
container-type: inline-size;
}
.viewport.zoomed {
overflow: auto;
}
/* The query container is the (zoom-scaled) board, so cqw labels scale WITH the board
— a magnifying-glass zoom. */
.scaler {
width: calc(100% * var(--z));
transition: width 0.25s ease;
container-type: inline-size;
}
.grid {
display: grid;
@@ -167,7 +169,8 @@
background: var(--tile-recent);
}
.cell.flash {
animation: tileflash 1s ease-in-out infinite;
/* Two flashes to draw the eye, then settle back to normal so it does not distract. */
animation: tileflash 1s ease-in-out 2;
}
@keyframes tileflash {
0%,