From d0e4645c365318f0488dc50611a946f17d6d3731 Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Fri, 11 Sep 2026 12:55:35 +0700
Subject: [PATCH] fix(playground): resolve desktop layout overlap and show
 velxio toolbar

---
 frontend/src/lib/version.ts                 |  2 +-
 frontend/src/routes/+layout.svelte          | 52 ++++++++++++++++++---
 frontend/src/routes/playground/+page.svelte | 32 ++++++-------
 velxio                                      |  2 +-
 4 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/frontend/src/lib/version.ts b/frontend/src/lib/version.ts
index 9519199..7fea55c 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 = 30;
+export const APP_VERSION = 31;
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index fe898a8..42c494e 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -16,15 +16,55 @@
 
 	// Playground = full-viewport route: tanpa padding/overflow halaman biasa, footer disembunyikan.
 	// Navbar tetap tampil (theme toggle + token login) — tinggi main otomatis menyesuaikan via flex.
-	let isPlayground = $derived($page.url.pathname === '/playground');
+	let isPlayground = $derived(
+		$page.url.pathname === '/playground' || $page.url.pathname.startsWith('/playground/')
+	);
 </script>
 
+<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;
+				}
+			}
+		</style>
+	{/if}
+</svelte:head>
+
 <Navbar />
 
-<main class="container" style="flex: 1; padding-block: {isPlayground ? '0' : '1.5rem'}; overflow: {isPlayground ? 'hidden' : 'visible'};">
-	{@render children()}
-</main>
-
-{#if !isPlayground}
+{#if isPlayground}
+	<main class="playground-main">
+		{@render children()}
+	</main>
+{:else}
+	<main class="container" style="flex: 1; padding-block: 1.5rem; overflow: visible;">
+		{@render children()}
+	</main>
 	<Footer />
 {/if}
+
+<style>
+	.playground-main {
+		flex: 1 1 0;
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+		max-width: none;
+		margin: 0;
+		padding: 0;
+		min-height: 0;
+		overflow: hidden;
+	}
+</style>
diff --git a/frontend/src/routes/playground/+page.svelte b/frontend/src/routes/playground/+page.svelte
index 8dbb888..781967a 100644
--- a/frontend/src/routes/playground/+page.svelte
+++ b/frontend/src/routes/playground/+page.svelte
@@ -275,19 +275,6 @@
 
 <svelte:head>
 	<title>Developer Playground — Elemes</title>
-	<style>
-		/* Override root container constrainer — playground is full viewport.
-		   main.container default-nya display:block + height auto, jadi anak
-		   .playground-page{height:100%} cuma ngisi tinggi intrinsic-nya.
-		   Jadikan flex-column agar playground memenuhi ruang sisa setelah navbar. */
-		main.container {
-			display: flex;
-			flex-direction: column;
-			max-width: none !important;
-			padding-inline: 0 !important;
-			min-height: 0;
-		}
-	</style>
 </svelte:head>
 
 <div class="playground-page">
@@ -425,11 +412,13 @@
 <style>
 	.playground-page {
 		width: 100%;
-		flex: 1;
+		height: 100%;
+		flex: 1 1 0;
 		min-height: 0;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+		position: relative;
 	}
 
 	/* ── Tab bar ── */
@@ -440,8 +429,11 @@
 		padding: 0 8px;
 		background: var(--color-bg-secondary);
 		border-bottom: 1px solid var(--color-border);
+		height: 36px;
 		min-height: 36px;
 		flex-shrink: 0;
+		position: relative;
+		z-index: 10;
 	}
 
 	.pg-tab {
@@ -486,19 +478,25 @@
 
 	/* ── Content area ── */
 	.pg-content {
-		flex: 1;
+		flex: 1 1 0;
 		min-height: 0;
+		width: 100%;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
+		position: relative;
+		z-index: 1;
 	}
 
 	.pg-iframe {
 		width: 100%;
-		flex: 1;
+		height: 100%;
+		flex: 1 1 0;
 		border: none;
 		display: block;
 		min-height: 0;
+		touch-action: pan-y;
+		overscroll-behavior: contain;
 	}
 
 	.pg-circuit-wrap {
@@ -672,9 +670,11 @@
 		}
 		.pg-content {
 			min-height: 400px;
+			height: auto;
 		}
 		.pg-iframe {
 			min-height: 400px;
+			height: auto;
 		}
 		.pg-file-tree-shell {
 			width: 180px;
diff --git a/velxio b/velxio
index 0972fa9..f2521f2 160000
--- a/velxio
+++ b/velxio
@@ -1 +1 @@
-Subproject commit 0972fa90a107ef21242ccfe8973e7ab24bf3cd78
+Subproject commit f2521f2da0cf78c745069569ca0e9b263004eabd