matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix extra scrollable space on mobile with 100dvh

Browse Source 
Use 100dvh (dynamic viewport height) instead of 100vh to fix
the extra scrollable space caused by mobile address bar height.
Keeps 100vh as fallback for unsupported browsers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-23 21:54:28 +01:00
parent c9867845b4
commit 00685c91fe
2 changed files with 4 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/styles/Layout.css
View File

@@ -9,6 +9,7 @@
.app-layout { .app-layout {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
background: var(--color-bg-main); background: var(--color-bg-main);
} }
@@ -17,6 +18,7 @@
flex: 1; flex: 1;
margin-left: var(--sidebar-width); margin-left: var(--sidebar-width);
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
transition: margin-left 0.3s ease; transition: margin-left 0.3s ease;

2
frontend/src/styles/theme/index.css
View File

@@ -28,6 +28,7 @@ body {
margin: 0; margin: 0;
min-width: 320px; min-width: 320px;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
font-family: var(--font-sans); font-family: var(--font-sans);
background: var(--color-bg-main); background: var(--color-bg-main);
color: var(--color-text-primary); color: var(--color-text-primary);
@@ -56,6 +57,7 @@ body {
#root { #root {
min-height: 100vh; min-height: 100vh;
min-height: 100dvh;
width: 100%; width: 100%;
position: relative; position: relative;
isolation: isolate; isolation: isolate;