fix(ui): pin the in-game ad-banner height on a short viewport #79

Merged

developer merged 1 commits from feature/game-banner-fixed-height into development 2026-06-17 10:28:53 +00:00

Conversation 1 Commits 1 Files Changed 1

+4 -1

developer commented 2026-06-17 10:24:35 +00:00

Owner

Copy Link

Copy Source

Что

В портретной игре рекламный баннер (AdBanner внутри «растущего» хедера .nav.grow) на коротком окне ужимался вместе с доской — они «делили» вертикальную нехватку места. Баннер должен держать высоту, а скроллиться должна только доска.

Почему

У .nav.grow стоял flex: 1 1 auto. На коротком окне flex сжимал хедер (обрезая баннер — у .ad стоит overflow:hidden) и одновременно скролл-зону доски .stage. Убрал только сжатие — flex: 1 0 auto: хедер по-прежнему растёт в свободную высоту (баннер под заголовком, доска прижата вниз), но на коротком окне держит свою высоту, а всю нехватку забирает скролл доски.

Баг чисто портретный: в ландшафте и на прочих экранах .nav уже flex: 0 0 auto.

Проверка

Mock-UI, портрет, живой баннер (Playwright, до/после):

окно	баннер было	баннер стало
900px	30px, доска без скролла	30px, доска без скролла
440px	14px (обрезан)	30px (целый), доска скроллится

Локально зелёные: pnpm check, 272 unit, build, bundle-size, 140 e2e (Chromium + WebKit).

Визуально проверить на контуре: открыть игру и уменьшить высоту окна — баннер не меняет высоту, скроллится только доска.

## Что В портретной игре рекламный баннер (`AdBanner` внутри «растущего» хедера `.nav.grow`) на коротком окне ужимался вместе с доской — они «делили» вертикальную нехватку места. Баннер должен держать высоту, а скроллиться должна только доска. ## Почему У `.nav.grow` стоял `flex: 1 1 auto`. На коротком окне flex сжимал хедер (обрезая баннер — у `.ad` стоит `overflow:hidden`) и одновременно скролл-зону доски `.stage`. Убрал только сжатие — `flex: 1 0 auto`: хедер по-прежнему растёт в свободную высоту (баннер под заголовком, доска прижата вниз), но на коротком окне держит свою высоту, а всю нехватку забирает скролл доски. Баг чисто портретный: в ландшафте и на прочих экранах `.nav` уже `flex: 0 0 auto`. ## Проверка Mock-UI, портрет, живой баннер (Playwright, до/после): | окно | баннер было | баннер стало | |---|---|---| | 900px | 30px, доска без скролла | 30px, доска без скролла | | 440px | **14px (обрезан)** | **30px (целый)**, доска скроллится | Локально зелёные: `pnpm check`, 272 unit, build, bundle-size, 140 e2e (Chromium + WebKit). Визуально проверить на контуре: открыть игру и уменьшить высоту окна — баннер не меняет высоту, скроллится только доска.

developer added 1 commit 2026-06-17 10:24:35 +00:00

fix(ui): pin the in-game ad-banner height on a short viewport ... 7cd4474945

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).

owner approved these changes 2026-06-17 10:28:30 +00:00

developer merged commit 712ef205c1 into development 2026-06-17 10:28:53 +00:00

developer deleted branch feature/game-banner-fixed-height 2026-06-17 10:28:53 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

owner

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

owner (Ilia) developer

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: developer/scrabble-game#79