gurix/Zauberwald
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent scrolling — all screens fit within viewport

Browse Source 
- html/body: height 100dvh, overflow hidden
- .screen--active: height 100dvh instead of min-height 100vh
- Forest/lesson/reward/welcome: flex: 1 to fill available space
- Forest scene: flex: 1 with min-height: 0 to shrink properly
- Reduced padding and font sizes for better fit
- Continue button and title: flex-shrink: 0 to stay visible

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
gurix
2026-03-29 20:55:52 +02:00
co-authored by Claude Opus 4.6
parent fabf9211c4
commit 59c3ae681c
1 changed files with 30 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/main.css
+30 -13
View File
@@ -26,6 +26,12 @@
} }
/* Base styles */ /* Base styles */
html, body {
height: 100%;
height: 100dvh;
overflow: hidden;
}
body { body {
font-family: "Nunito", sans-serif; font-family: "Nunito", sans-serif;
background: var(--bg-cream); background: var(--bg-cream);
@@ -53,7 +59,9 @@ h3 {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
opacity: 1; opacity: 1;
min-height: 100vh; height: 100vh;
height: 100dvh;
overflow: hidden;
} }
/* Welcome screen */ /* Welcome screen */
@@ -61,9 +69,11 @@ h3 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; justify-content: center;
padding: 1.5rem;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
flex: 1;
} }
.welcome h1 { .welcome h1 {
@@ -175,16 +185,18 @@ h3 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; padding: 1rem 1.5rem;
min-height: 100vh; flex: 1;
background: var(--bg-forest); background: var(--bg-forest);
overflow: auto;
} }
.forest__title { .forest__title {
font-family: "Quicksand", sans-serif; font-family: "Quicksand", sans-serif;
font-size: 2rem; font-size: 1.5rem;
color: var(--text-dark); color: var(--text-dark);
margin-bottom: 1.5rem; margin-bottom: 0.5rem;
flex-shrink: 0;
} }
.forest__level-map { .forest__level-map {
@@ -251,14 +263,15 @@ h3 {
} }
.forest__continue-btn { .forest__continue-btn {
padding: 1rem 3rem; padding: 0.75rem 2rem;
border-radius: 12px; border-radius: 12px;
background: var(--accent-green); background: var(--accent-green);
color: white; color: white;
border: none; border: none;
font-family: "Quicksand", sans-serif; font-family: "Quicksand", sans-serif;
font-weight: 700; font-weight: 700;
font-size: 1.3rem; font-size: 1.1rem;
flex-shrink: 0;
cursor: pointer; cursor: pointer;
transition: transform 0.2s ease; transition: transform 0.2s ease;
} }
@@ -282,9 +295,9 @@ h3 {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2rem; gap: 1rem;
padding: 2rem; padding: 1rem;
min-height: 100vh; flex: 1;
background: var(--bg-cream); background: var(--bg-cream);
position: relative; position: relative;
} }
@@ -448,7 +461,9 @@ h3 {
position: relative; position: relative;
width: 100%; width: 100%;
max-width: 800px; max-width: 800px;
margin: 0 auto 1.5rem; flex: 1;
min-height: 0;
margin: 0 auto 0.75rem;
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -519,9 +534,11 @@ h3 {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; justify-content: center;
padding: 1.5rem;
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
flex: 1;
text-align: center; text-align: center;
} }