chris/flashCards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stabilize mobile viewport height to stop keypad jump

Browse Source
This commit is contained in:
chris 2025-11-22 20:45:46 -05:00
parent c69731d5d5
commit 8ff2198774
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
style.css
View File

@ -19,7 +19,9 @@
radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%); radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06), transparent 25%);
font-family: 'MedievalSharp', cursive; font-family: 'MedievalSharp', cursive;
display: flex; justify-content: center; align-items: center; display: flex; justify-content: center; align-items: center;
min-height: 100vh; margin: 0; color: var(--ink); min-height: 100vh;
min-height: 100dvh; /* prevent iOS address bar resize from jumping the layout */
margin: 0; color: var(--ink);
padding: 16px 10px calc(18px + env(safe-area-inset-bottom)); padding: 16px 10px calc(18px + env(safe-area-inset-bottom));
overflow-x: hidden; overflow-y: auto; overflow-x: hidden; overflow-y: auto;
transition: background 0.5s, background-image 0.5s; transition: background 0.5s, background-image 0.5s;
@ -678,6 +680,7 @@
width: 100%; width: 100%;
max-width: 520px; max-width: 520px;
max-height: calc(100vh - 18px); max-height: calc(100vh - 18px);
max-height: calc(100dvh - 18px);
} }
.header-info { flex-wrap: wrap; gap: 6px; } .header-info { flex-wrap: wrap; gap: 6px; }
.equation { font-size: 2.6rem; } .equation { font-size: 2.6rem; }