a2nr
/
elemes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(playground): resolve desktop layout overlap and show velxio toolbar

This commit is contained in:
a2nr 2026-09-11 12:55:35 +07:00
parent 1f4217be76
commit d0e4645c36
4 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/version.ts
View File

@ -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;

52
frontend/src/routes/+layout.svelte
View File

@ -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>

32
frontend/src/routes/playground/+page.svelte
View File

@ -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;

2
velxio

@ -1 +1 @@
Subproject commit 0972fa90a107ef21242ccfe8973e7ab24bf3cd78
Subproject commit f2521f2da0cf78c745069569ca0e9b263004eabd