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

UI: tab-bar navigation — drop the hamburger #39

Merged
developer merged 4 commits from feature/ui-tabbar-nav into development 2026-06-11 13:46:41 +00:00
Conversation 0 Commits 4 Files Changed 29
+7 -6
1 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1b3d7dc256 - Show all commits
ui/src/components/Header.svelte
+7 -6
View File
@@ -105,15 +105,16 @@
is unchanged) and centres the title within it, BELOW the notch — lining it up vertically is unchanged) and centres the title within it, BELOW the notch — lining it up vertically
with Telegram's own back/menu controls, which sit in the band's corners. */ with Telegram's own back/menu controls, which sit in the band's corners. */
:global(html.tg-fullscreen) .bar { :global(html.tg-fullscreen) .bar {
/* The bar spans the Telegram nav band and then **+20px** past --tg-content-top, so the /* The bar is sized by its content + padding — in Telegram the title is the only child (the
native controls aren't flush against our content. Without the (removed) hamburger the back chevron is hidden), so min-height (the nav-band height) doesn't bind. Without the
title alone left the bar sitting right on the band; the extra height restores the gap. (removed) hamburger that content shrank and the bar sat flush under Telegram's native nav
padding-top clears the notch; the title centres in the band. (Owner-tunable height.) */ band. So **padding-top** is the lever: it drops the title clear of the band — the notch
min-height: calc(var(--tg-content-top) + 20px); plus a **+20px** gap (was +6). (Owner-tunable: bump the +20px.) */
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) + 6px); padding-top: calc(var(--tg-safe-top) + 26px);
padding-bottom: 6px; padding-bottom: 6px;
} }
:global(html.tg-fullscreen) .spacer { :global(html.tg-fullscreen) .spacer {