From 0decd6ce8656c2c514a400a7415d0d95b369608d Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Sun, 13 Sep 2026 15:53:02 +0700
Subject: [PATCH] fix(playground): resolve mobile layout overlap and missing
 console input

- Lock viewport and relative navbar in +layout.svelte on both mobile and desktop
- Remove static min-height and overflow-y overrides on mobile in +page.svelte
- Auto-collapse file tree and compact code toolbar on mobile
- Add safe-area padding and 200px mobile height in ConsolePanel.svelte
- Bump APP_VERSION to 32
---
 frontend/src/lib/version.ts                   |  2 +-
 frontend/src/routes/+layout.svelte            | 24 ++++++-------
 frontend/src/routes/playground/+page.svelte   | 34 +++++++++++--------
 .../src/routes/playground/ConsolePanel.svelte | 11 +++++-
 4 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/frontend/src/lib/version.ts b/frontend/src/lib/version.ts
index 7fea55c..77e7732 100644
--- a/frontend/src/lib/version.ts
+++ b/frontend/src/lib/version.ts
@@ -3,4 +3,4 @@
  * Both Footer.svelte and service-worker.ts import from here.
  * Bump this number after every feature/bugfix release.
  */
-export const APP_VERSION = 31;
+export const APP_VERSION = 32;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 42c494e..37ddec2 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -24,19 +24,17 @@
 <svelte:head>
 	{#if isPlayground}
 		<style>
-			@media (min-width: 769px) {
-				html,
-				body {
-					height: 100dvh !important;
-					max-height: 100dvh !important;
-					overflow: hidden !important;
-					overscroll-behavior: none !important;
-				}
-				nav.navbar {
-					position: relative !important;
-					flex-shrink: 0 !important;
-					top: auto !important;
-				}
+			html,
+			body {
+				height: 100dvh !important;
+				max-height: 100dvh !important;
+				overflow: hidden !important;
+				overscroll-behavior: none !important;
+			}
+			nav.navbar {
+				position: relative !important;
+				flex-shrink: 0 !important;
+				top: auto !important;
 			}
 		</style>
 	{/if}
diff --git a/frontend/src/routes/playground/+page.svelte b/frontend/src/routes/playground/+page.svelte
index d8e25eb..164ed35 100644
--- a/frontend/src/routes/playground/+page.svelte
+++ b/frontend/src/routes/playground/+page.svelte
@@ -306,6 +306,9 @@
 
 	onMount(() => {
 		window.addEventListener('message', handleMessage);
+		if (window.innerWidth <= 768 && $playgroundStore.fileTreeVisible) {
+			playgroundStore.toggleFileTree();
+		}
 	});
 
 	onDestroy(() => {
@@ -758,21 +761,24 @@
 
 	/* ── Mobile ── */
 	@media (max-width: 768px) {
-		.playground-page {
-			overflow-y: auto;
-			height: auto;
-			min-height: 100dvh;
-		}
-		.pg-content {
-			min-height: 400px;
-			height: auto;
-		}
-		.pg-iframe {
-			min-height: 400px;
-			height: auto;
-		}
 		.pg-file-tree-shell {
-			width: 180px;
+			width: 150px;
+		}
+		.pg-code-toolbar {
+			gap: 0.35rem;
+			padding: 0.25rem 0.5rem;
+		}
+		.pg-file-name {
+			max-width: 90px;
+			font-size: 0.75rem;
+		}
+		.pg-mode-btn {
+			padding: 0.15rem 0.35rem;
+			font-size: 0.68rem;
+		}
+		.pg-run-btn {
+			padding: 0.25rem 0.6rem;
+			font-size: 0.75rem;
 		}
 	}
 </style>
diff --git a/frontend/src/routes/playground/ConsolePanel.svelte b/frontend/src/routes/playground/ConsolePanel.svelte
index 9cd8fff..7c33fdb 100644
--- a/frontend/src/routes/playground/ConsolePanel.svelte
+++ b/frontend/src/routes/playground/ConsolePanel.svelte
@@ -268,7 +268,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.4rem;
-		padding: 0.4rem 0.75rem;
+		padding: 0.4rem 0.75rem max(0.4rem, env(safe-area-inset-bottom, 0px));
 		border-top: 1px solid var(--color-border);
 		background: var(--color-bg-secondary);
 		flex-shrink: 0;
@@ -327,4 +327,13 @@
 		background: var(--color-border);
 		border-radius: 3px;
 	}
+
+	@media (max-width: 768px) {
+		.console-panel {
+			height: 200px;
+		}
+		.console-panel.collapsed {
+			height: 38px;
+		}
+	}
 </style>