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;
|
-webkit-user-select: none;
|
||||||
}
|
}
|
||||||
.nav.grow {
|
.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 {
|
.bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
Reference in New Issue
Block a user