diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte index 498a25d..f5a5b01 100644 --- a/ui/src/components/Header.svelte +++ b/ui/src/components/Header.svelte @@ -95,14 +95,16 @@ it, BELOW the notch — lining them up vertically with Telegram's own back/menu controls, which sit in the band's corners (Stage 17). */ :global(html.tg-fullscreen) .bar { - /* +6px over the content-safe band so Telegram's native controls aren't flush against - our header (owner's review tweak, Stage 17). */ - min-height: calc(var(--tg-content-top) + 6px); + min-height: var(--tg-content-top); box-sizing: border-box; align-items: center; justify-content: center; - padding-top: var(--tg-safe-top); - padding-bottom: 0; + /* +12px of vertical breathing room (6 above / 6 below the centred content, on top of the + notch) so Telegram's native controls aren't flush against our header. Applied as + padding because the bar is sized by its content here, not by min-height (owner review + tweaks, Stage 17). */ + padding-top: calc(var(--tg-safe-top) + 6px); + padding-bottom: 6px; } :global(html.tg-fullscreen) .spacer { display: none;