developer/scrabble-game
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

style(ui): halve custom header top/bottom padding

Browse Source 
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.
This commit is contained in:
Ilia Denisov
2026-06-23 21:51:52 +02:00
parent f8fab4a4c2
commit c02262fcf7
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/Header.svelte
+6 -6
View File
@@ -81,7 +81,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
padding: 10px var(--pad); padding: 5px var(--pad);
} }
h1 { h1 {
font-size: 1.05rem; font-size: 1.05rem;
@@ -139,15 +139,15 @@
back chevron is hidden), so min-height (the nav-band height) doesn't bind. Without the 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 (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 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 plus an **8px** gap (halved from 16). A fixed px (not rem/em) gap so the clearance from
native controls stays constant if the user scales up the font (the title then grows Telegram's native controls stays constant if the user scales up the font (the title then
downward and the bar with it). (Owner-tunable: the 10px.) */ grows downward and the bar with it). (Owner-tunable: the 8px.) */
min-height: var(--tg-content-top); min-height: var(--tg-content-top);
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding-top: calc(var(--tg-safe-top) + 16px); padding-top: calc(var(--tg-safe-top) + 8px);
padding-bottom: 6px; padding-bottom: 3px;
} }
:global(html.tg-fullscreen) .spacer { :global(html.tg-fullscreen) .spacer {
display: none; display: none;