From 7cd447494528613efda40d8f27d4fc056c44c53c Mon Sep 17 00:00:00 2001 From: Ilia Denisov Date: Wed, 17 Jun 2026 12:24:11 +0200 Subject: [PATCH] fix(ui): pin the in-game ad-banner height on a short viewport MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- ui/src/components/Header.svelte | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte index de17518..d050e83 100644 --- a/ui/src/components/Header.svelte +++ b/ui/src/components/Header.svelte @@ -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;