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

feat(telegram): clear bottom and side safe-area insets
CI / changes (pull_request) Successful in 2s
Details
CI / unit (pull_request) Has been skipped
Details
CI / integration (pull_request) Has been skipped
Details
CI / ui (pull_request) Successful in 55s
Details
CI / gate (pull_request) Successful in 0s
Details
CI / deploy (pull_request) Successful in 1m17s
Details

Browse Source 
Only the device safe-area TOP inset was mirrored, so on phones with a home
indicator the rack / bottom bar sat under it, and in landscape the notch
clipped the screen edges.

Mirror the full device safe-area inset (bottom / left / right) into new
--tg-safe-bottom / --tg-safe-left / --tg-safe-right CSS vars (0 outside
Telegram) and pad the shared Screen wrapper by them, so every screen clears the
home indicator and the landscape notch; the top inset stays owned by the header.
Replace telegramSafeAreaTop with telegramSafeAreaInset (the full inset object),
with a unit test.
This commit is contained in:
Ilia Denisov
2026-06-24 10:24:56 +02:00
parent 0fb6004a8b
commit b84bd1297e
5 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/Screen.svelte
+5
View File
@@ -101,6 +101,11 @@
bottom input — chat, word-check — stays above an open soft keyboard without the page
scrolling; falls back to the full height where the var is unset. */
height: var(--vvh, 100%);
/* Clear the device safe-area cut-outs inside Telegram — the home indicator at the bottom and
the notch sides in landscape; all 0 elsewhere. The top inset is owned by the header. */
padding-bottom: var(--tg-safe-bottom, 0px);
padding-left: var(--tg-safe-left, 0px);
padding-right: var(--tg-safe-right, 0px);
}
.content {
flex: 0 1 auto;