helios/heliosian
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use dynamic viewport height and bottom safe area so mobile content clears the tab bar

Browse Source
This commit is contained in:
Ian Gulliver
2026-08-16 15:44:27 -07:00
parent 440b3f11de
commit 778dd33b20
1 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/directory/style.css
+5 -4
View File
@@ -17,7 +17,7 @@ body {
margin: 0; margin: 0;
font-family: Inter, system-ui, sans-serif; font-family: Inter, system-ui, sans-serif;
display: flex; display: flex;
height: 100vh; height: 100dvh;
overflow: hidden; overflow: hidden;
color: var(--ink); color: var(--ink);
background: #fff; background: #fff;
@@ -1608,9 +1608,9 @@ a.list-row:hover {
display: none; display: none;
} }
main { main {
height: 100vh; height: 100dvh;
padding-top: 48px; padding-top: 48px;
padding-bottom: 62px; padding-bottom: calc(62px + env(safe-area-inset-bottom));
} }
.container { .container {
padding-left: 16px; padding-left: 16px;
@@ -1680,7 +1680,8 @@ a.list-row:hover {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 62px; height: calc(62px + env(safe-area-inset-bottom));
padding-bottom: env(safe-area-inset-bottom);
background: #fff; background: #fff;
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
z-index: 30; z-index: 30;