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;
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;