From 1659063784c33e100b29fcc0d484bbde9f190998 Mon Sep 17 00:00:00 2001
From: a2nr <anggoro.dwi.nr@gmail.com>
Date: Sun, 23 Aug 2026 09:27:11 +0700
Subject: [PATCH] fix(playground): view tab Arduino/Flowchart/Circuit mengikuti
 ruang kosong & tambah link Playground di menu burger

- playground +page: jadikan main.container flex-column + .playground-page flex:1
  agar memenuhi ruang sisa setelah navbar (sebelumnya height:100% resolve ke
  tinggi intrinsik karena parent display:block)
- pg-content: tambah flex-direction:column supaya flex:1 grow tinggi bukan lebar
- override :global .flowchart-container & .circuit-wrapper jadi height:100%;flex:1;
  min-height:0 (hilangkan min-height:400px / height:550px fix) agar melar
- Navbar: tambah link Playground di dropdown burger tepat di bawah Tema Gelap
- terverifikasi Playwright desktop(1280x800) & mobile(390x780): semua tab 98-100%
---
 frontend/src/lib/components/Navbar.svelte   |  4 ++++
 frontend/src/routes/playground/+page.svelte | 20 +++++++++++++++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index a579f16..562cdf9 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -54,6 +54,10 @@
 								Tema Gelap
 							{/if}
 						</button>
+						<a href="/playground" class="dropdown-item" onclick={() => (showDropdown = false)}>
+							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" y1="19" x2="20" y2="19"></line></svg>
+							Playground
+						</a>
 						<a href="/help" target="_blank" class="dropdown-item" onclick={() => (showDropdown = false)}>
 							<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
 							Bantuan
diff --git a/frontend/src/routes/playground/+page.svelte b/frontend/src/routes/playground/+page.svelte
index e176808..8dbb888 100644
--- a/frontend/src/routes/playground/+page.svelte
+++ b/frontend/src/routes/playground/+page.svelte
@@ -276,10 +276,16 @@
 <svelte:head>
 	<title>Developer Playground — Elemes</title>
 	<style>
-		/* Override root container constrainer — playground is full viewport */
+		/* 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>
@@ -419,7 +425,8 @@
 <style>
 	.playground-page {
 		width: 100%;
-		height: 100%;
+		flex: 1;
+		min-height: 0;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
@@ -483,6 +490,7 @@
 		min-height: 0;
 		overflow: hidden;
 		display: flex;
+		flex-direction: column;
 	}
 
 	.pg-iframe {
@@ -502,15 +510,16 @@
 		overflow: hidden;
 	}
 
-	/* Override CircuitEditor agar fill flex area */
+	/* Override CircuitEditor agar fill ruang kosong di desktop */
 	.pg-content :global(.circuit-container) {
 		flex: 1;
 		min-height: 0;
+		height: 100%;
 	}
 
 	.pg-content :global(.circuit-wrapper) {
-		flex: 1;
-		height: auto;
+		flex: 1 1 auto;
+		height: 100%;
 		min-height: 0;
 	}
 
@@ -651,6 +660,7 @@
 	.pg-content :global(.flowchart-container) {
 		flex: 1;
 		min-height: 0;
+		height: 100%;
 	}
 
 	/* ── Mobile ── */