fix(ui): pin the in-game ad-banner height on a short viewport
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 49s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m0s
CI / changes (pull_request) Successful in 1s
CI / unit (pull_request) Has been skipped
CI / integration (pull_request) Has been skipped
CI / ui (pull_request) Successful in 49s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m0s
The ad banner lives inside the grown game header (`.nav.grow`, portrait game only). That rule carried `flex: 1 1 auto`, so on a short viewport the flex algorithm shrank the header — clipping the banner (`.ad` is `overflow:hidden`) — *and* the board's scroll area at the same time. The banner and the board ended up splitting the vertical squeeze. Drop the shrink (`flex: 1 0 auto`): the header still grows into spare height (banner under the title, board pinned to the bottom), but on a short viewport it holds its natural height and the board's own scroll (`.stage`) absorbs the whole squeeze. The banner now keeps a constant height. Portrait-only: in landscape and on every other screen `.nav` is already `flex: 0 0 auto`, so the banner never shrank there. Verified in the mock UI (portrait, live banner): at 440px tall the banner held 30px (was clipped to 14px) while the board scrolled; the tall-viewport layout is unchanged. Full UI suite green locally (check, 272 unit, build, bundle-size, 140 e2e).
This commit is contained in:
@@ -57,7 +57,10 @@
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
.nav.grow {
|
||||
flex: 1 1 auto;
|
||||
/* Grow into spare height (banner under the title, the board pinned to the bottom), but
|
||||
never shrink: on a short viewport the banner keeps its height and the board's own
|
||||
scroll (.stage) absorbs the squeeze, instead of the banner and the board splitting it. */
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
.bar {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user