From c02262fcf7e65070852d93a01c16d14511a1bd79 Mon Sep 17 00:00:00 2001 From: Ilia Denisov Date: Tue, 23 Jun 2026 21:51:52 +0200 Subject: [PATCH] style(ui): halve custom header top/bottom padding The custom title bar was too tall. Halve the standard bar padding (10->5px) and, in the Telegram path, the notch gap (16->8px) and bottom (6->3px); the notch safe-area inset is unchanged. Title and back chevron stay vertically centred. --- ui/src/components/Header.svelte | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/ui/src/components/Header.svelte b/ui/src/components/Header.svelte index 6579946..7d79b29 100644 --- a/ui/src/components/Header.svelte +++ b/ui/src/components/Header.svelte @@ -81,7 +81,7 @@ display: flex; align-items: center; gap: var(--gap); - padding: 10px var(--pad); + padding: 5px var(--pad); } h1 { font-size: 1.05rem; @@ -139,15 +139,15 @@ back chevron is hidden), so min-height (the nav-band height) doesn't bind. Without the (removed) hamburger that content shrank and the bar sat flush under Telegram's native nav band. So **padding-top** is the lever: it drops the title clear of the band — the notch - plus a **10px** gap (was 6). A fixed px (not rem/em) gap so the clearance from Telegram's - native controls stays constant if the user scales up the font (the title then grows - downward and the bar with it). (Owner-tunable: the 10px.) */ + plus an **8px** gap (halved from 16). A fixed px (not rem/em) gap so the clearance from + Telegram's native controls stays constant if the user scales up the font (the title then + grows downward and the bar with it). (Owner-tunable: the 8px.) */ min-height: var(--tg-content-top); box-sizing: border-box; align-items: center; justify-content: center; - padding-top: calc(var(--tg-safe-top) + 16px); - padding-bottom: 6px; + padding-top: calc(var(--tg-safe-top) + 8px); + padding-bottom: 3px; } :global(html.tg-fullscreen) .spacer { display: none;