🐐

frontend/src/routes/+layout.svelte

@@ -5,15 +5,35 @@
 	import { page } from '$app/state';
 
 	let { children } = $props();
-</script>
 
-{#if !['auth', 'forgot-password'].some(p => page.url.pathname.startsWith(`/${p}`))}
-  <Header />
-{/if}
+	const showHeader = $derived(!['auth', 'forgot-password'].some(p => page.url.pathname.startsWith(`/${p}`)));
+</script>
 
 <svelte:head>
 	<title>WikiTCG</title>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-{@render children()}
+<div class="layout">
+  {#if showHeader}
+    <Header />
+  {/if}
+  <div class="page-area">
+    {@render children()}
+  </div>
+</div>
+
+<style>
+  .layout {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .page-area {
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
+  }
+</style>