bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Try using env safe insets to avoid overlapping elements on mobile

Browse Source
This commit is contained in:
Jason Zimdars
2025-07-10 14:26:58 -05:00
parent 4d65d2be85
commit 0d1c0f4e75
4 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/header.css
+1 -1
View File
@@ -9,7 +9,7 @@
align-items: center;
display: flex;
padding: var(--block-space-half) var(--inline-space);
padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space);
/* Change the grid size depending on how many buttons are present */
&:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
app/assets/stylesheets/terminals.css
+1 -1
View File
@@ -7,7 +7,7 @@
font-family: var(--font-mono);
font-size: var(--text-normal);
inset: auto 0 0 0;
padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3));
padding: var(--block-space) calc(var(--tray-size) + calc(var(--inline-space) * 3)) calc(var(--block-space) + env(safe-area-inset-bottom));
position: fixed;
z-index: var(--z-terminal);
app/assets/stylesheets/trays.css
+1 -1
View File
@@ -11,7 +11,7 @@
align-items: end;
block-size: var(--footer-height);
display: grid;
inset-block: auto 0;
inset-block: auto env(safe-area-inset-bottom);
inline-size: var(--tray-size);
position: fixed;
z-index: var(--z-tray);
app/views/layouts/shared/_head.html.erb
+1 -1
View File
@@ -1,7 +1,7 @@
<head>
<%= page_title_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="view-transition" content="same-origin">
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">