till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:21:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(workbench): make page width responsive on mobile

Browse source 
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>
This commit is contained in:
Till JS 2026-04-03 16:18:08 +02:00
parent 3714b3ae67
commit 6a75f3fca1
3 changed files with 19 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

6
apps/manacore/apps/web/src/lib/components/page-carousel/PageCarousel.svelte
View file

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

1
apps/manacore/apps/web/src/lib/components/page-carousel/PageShell.svelte
View file

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

14
apps/manacore/apps/web/src/routes/(app)/+page.svelte
View file

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