From 59c3ae681c0c68183900ed2f221c03b4e4bc0c44 Mon Sep 17 00:00:00 2001
From: Markus Graf <info@markusgraf.ch>
Date: Sun, 29 Mar 2026 20:55:52 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20prevent=20scrolling=20=E2=80=94=20all=20?=
 =?UTF-8?q?screens=20fit=20within=20viewport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/styles/main.css | 43 ++++++++++++++++++++++++++++++-------------
 1 file changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/styles/main.css b/src/styles/main.css
index a754dac..15f94d7 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -26,6 +26,12 @@
 }
 
 /* Base styles */
+html, body {
+	height: 100%;
+	height: 100dvh;
+	overflow: hidden;
+}
+
 body {
 	font-family: "Nunito", sans-serif;
 	background: var(--bg-cream);
@@ -53,7 +59,9 @@ h3 {
 	flex-direction: column;
 	align-items: center;
 	opacity: 1;
-	min-height: 100vh;
+	height: 100vh;
+	height: 100dvh;
+	overflow: hidden;
 }
 
 /* Welcome screen */
@@ -61,9 +69,11 @@ h3 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 2rem;
+	justify-content: center;
+	padding: 1.5rem;
 	max-width: 600px;
 	margin: 0 auto;
+	flex: 1;
 }
 
 .welcome h1 {
@@ -175,16 +185,18 @@ h3 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 2rem;
-	min-height: 100vh;
+	padding: 1rem 1.5rem;
+	flex: 1;
 	background: var(--bg-forest);
+	overflow: auto;
 }
 
 .forest__title {
 	font-family: "Quicksand", sans-serif;
-	font-size: 2rem;
+	font-size: 1.5rem;
 	color: var(--text-dark);
-	margin-bottom: 1.5rem;
+	margin-bottom: 0.5rem;
+	flex-shrink: 0;
 }
 
 .forest__level-map {
@@ -251,14 +263,15 @@ h3 {
 }
 
 .forest__continue-btn {
-	padding: 1rem 3rem;
+	padding: 0.75rem 2rem;
 	border-radius: 12px;
 	background: var(--accent-green);
 	color: white;
 	border: none;
 	font-family: "Quicksand", sans-serif;
 	font-weight: 700;
-	font-size: 1.3rem;
+	font-size: 1.1rem;
+	flex-shrink: 0;
 	cursor: pointer;
 	transition: transform 0.2s ease;
 }
@@ -282,9 +295,9 @@ h3 {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	gap: 2rem;
-	padding: 2rem;
-	min-height: 100vh;
+	gap: 1rem;
+	padding: 1rem;
+	flex: 1;
 	background: var(--bg-cream);
 	position: relative;
 }
@@ -448,7 +461,9 @@ h3 {
 	position: relative;
 	width: 100%;
 	max-width: 800px;
-	margin: 0 auto 1.5rem;
+	flex: 1;
+	min-height: 0;
+	margin: 0 auto 0.75rem;
 	border-radius: 16px;
 	overflow: hidden;
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
@@ -519,9 +534,11 @@ h3 {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	padding: 2rem;
+	justify-content: center;
+	padding: 1.5rem;
 	max-width: 600px;
 	margin: 0 auto;
+	flex: 1;
 	text-align: center;
 }