From 6a75f3fca195ec458c1eaf3e6d80b572c2bdd53f Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Fri, 3 Apr 2026 16:18:08 +0200
Subject: [PATCH] fix(workbench): make page width responsive on mobile

Pages now adapt to the available screen width on mobile (<640px) instead
of overflowing at the fixed 480px default. Resize handle remains functional.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/page-carousel/PageCarousel.svelte   |  6 ++++++
 .../lib/components/page-carousel/PageShell.svelte  |  1 +
 .../apps/web/src/routes/(app)/+page.svelte         | 14 ++++++++++++--
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte b/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
index 4975f65b9..f81788c20 100644
--- a/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
+++ b/apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
@@ -172,6 +172,12 @@
 		scrollbar-width: none;
 		flex: 1;
 	}
+	@media (max-width: 639px) {
+		.fokus-track {
+			padding: 0.5rem 1rem;
+			gap: 0.75rem;
+		}
+	}
 	.fokus-track::-webkit-scrollbar {
 		display: none;
 	}
diff --git a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
index c286ec33e..75063a1b6 100644
--- a/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
+++ b/apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
@@ -242,6 +242,7 @@
 	.page-shell {
 		flex: 0 0 auto;
 		min-height: 60vh;
+		max-width: calc(100vw - 2rem);
 		background: #fffef5;
 		border-radius: 0.375rem;
 		box-shadow:
diff --git a/apps/manacore/apps/web/src/routes/(app)/+page.svelte b/apps/manacore/apps/web/src/routes/(app)/+page.svelte
index 0e8baa0a9..c854948a3 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/manacore/apps/web/src/routes/(app)/+page.svelte
@@ -3,6 +3,7 @@
 	import AppPagePicker from '$lib/components/workbench/AppPagePicker.svelte';
 	import { PageCarousel, type CarouselPage } from '$lib/components/page-carousel';
 	import { getApp, getAppByDragType } from '$lib/app-registry';
+	import { onMount } from 'svelte';
 	import { createAppSettingsStore } from '@manacore/shared-stores';
 	import { DragPreview } from '@manacore/shared-ui/dnd';
 	import type { DragType } from '@manacore/shared-ui/dnd';
@@ -20,7 +21,17 @@
 	}
 
 	// ── Persisted workbench state ───────────────────────────
-	const DEFAULT_WIDTH = 480;
+	const DESKTOP_WIDTH = 480;
+	let DEFAULT_WIDTH = $state(DESKTOP_WIDTH);
+
+	onMount(() => {
+		function updateDefaultWidth() {
+			DEFAULT_WIDTH = window.innerWidth < 640 ? window.innerWidth - 32 : DESKTOP_WIDTH;
+		}
+		updateDefaultWidth();
+		window.addEventListener('resize', updateDefaultWidth);
+		return () => window.removeEventListener('resize', updateDefaultWidth);
+	});
 
 	interface WorkbenchSettings extends Record<string, unknown> {
 		openApps: {
@@ -61,7 +72,6 @@
 	]);
 
 	// Load persisted state once on mount (not reactive — avoids loop with persistState)
-	import { onMount } from 'svelte';
 	onMount(() => {
 		const s = workbenchStore.settings;
 		if (s.openApps?.length) openApps = [...s.openApps];