feat(manacore/web): add responsive mobile styles for PWA readiness

Navigation:
- PillNavigation: icon-only pills on mobile (<640px), 44px min touch targets
- QuickInputBar: tighter padding and smaller height on mobile
- Main content area: reduced padding on small screens (px-3 py-4)

Typography & Global:
- Responsive heading sizes (h1-h3 scale down on mobile)
- Safe-area body padding for PWA standalone mode

Module ListViews:
- Todo: 44px min-height task items, larger checkboxes on mobile
- Calendar: 44px min-height event cards, larger quick-add input
- Contacts: 44px min-height contact items
- Chat: min-h-[44px] conversation items, tighter container padding

Layout:
- SplitPaneLayout: stacks vertically on mobile (<768px), hides resize handle

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/manacore/apps/web/src/app.css

@@ -50,4 +50,29 @@
 		line-height: 1.5rem;
 		font-weight: 500;
 	}
+
+	/* Responsive typography for mobile */
+	@media (max-width: 640px) {
+		h1 {
+			font-size: 1.75rem;
+			line-height: 2rem;
+		}
+
+		h2 {
+			font-size: 1.5rem;
+			line-height: 1.875rem;
+		}
+
+		h3 {
+			font-size: 1.25rem;
+			line-height: 1.75rem;
+		}
+	}
+
+	/* Safe area for PWA standalone mode */
+	body {
+		padding-top: env(safe-area-inset-top, 0px);
+		padding-left: env(safe-area-inset-left, 0px);
+		padding-right: env(safe-area-inset-right, 0px);
+	}
 }

apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte

@@ -425,4 +425,21 @@
 		font-size: 0.8125rem;
 		color: #9ca3af;
 	}
+
+	/* Mobile: larger touch targets, tighter spacing */
+	@media (max-width: 640px) {
+		.app-view {
+			padding: 0.75rem;
+		}
+
+		.event-card {
+			padding: 0.75rem;
+			min-height: 44px;
+		}
+
+		.quick-add {
+			padding: 0.625rem 0.75rem;
+			min-height: 44px;
+		}
+	}
 </style>

apps/manacore/apps/web/src/lib/modules/chat/ListView.svelte

@@ -47,13 +47,13 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-3 p-4">
+<div class="flex h-full flex-col gap-3 p-3 sm:p-4">
 	<p class="text-xs text-white/40">{conversations.length} Unterhaltungen</p>
 
 	<div class="flex-1 overflow-auto">
 		{#each sorted as conv (conv.id)}
 			{@const lastMsg = lastMessages.get(conv.id)}
-			<div class="mb-1 rounded-md px-3 py-2.5 transition-colors hover:bg-white/5">
+			<div class="mb-1 min-h-[44px] rounded-md px-3 py-3 transition-colors hover:bg-white/5">
 				<div class="flex items-center justify-between">
 					<p class="truncate text-sm font-medium text-white/80">
 						{conv.title || 'Neue Unterhaltung'}

apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte

@@ -390,4 +390,12 @@
 		font-size: 0.8125rem;
 		color: #9ca3af;
 	}
+
+	/* Mobile: larger touch targets */
+	@media (max-width: 640px) {
+		.contact-item {
+			padding: 0.625rem 0.375rem;
+			min-height: 44px;
+		}
+	}
 </style>

apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte

@@ -436,4 +436,21 @@
 		font-size: 0.8125rem;
 		color: #9ca3af;
 	}
+
+	/* Mobile: larger touch targets */
+	@media (max-width: 640px) {
+		.app-view {
+			padding: 0.75rem;
+		}
+
+		.task-item {
+			padding: 0.625rem 0.375rem;
+			min-height: 44px;
+		}
+
+		.checkbox {
+			width: 20px;
+			height: 20px;
+		}
+	}
 </style>

apps/manacore/apps/web/src/lib/splitscreen/SplitPaneLayout.svelte

@@ -15,11 +15,11 @@
 	let { children }: { children: Snippet } = $props();
 </script>
 
-<div class="flex h-full w-full overflow-hidden">
+<div class="split-layout flex h-full w-full overflow-hidden">
 	<!-- Main panel -->
 	<div
 		style="width: {splitStore.isActive ? splitStore.dividerPosition + '%' : '100%'}"
-		class="h-full overflow-auto transition-[width] duration-200 ease-out"
+		class="main-pane h-full overflow-auto transition-[width] duration-200 ease-out"
 	>
 		{@render children()}
 	</div>
@@ -30,7 +30,7 @@
 		<!-- Split panel -->
 		<div
 			style="width: {100 - splitStore.dividerPosition}%"
-			class="flex h-full flex-col overflow-hidden border-l border-white/10"
+			class="split-pane flex h-full flex-col overflow-hidden border-l border-white/10"
 		>
 			<PanelHeader appId={splitStore.splitApp} onClose={() => splitStore.closeSplit()} />
 			<div class="flex-1 overflow-auto">
@@ -47,3 +47,27 @@
 		</div>
 	{/if}
 </div>
+
+<style>
+	/* Mobile: stack split pane vertically, hide resize handle */
+	@media (max-width: 768px) {
+		.split-layout {
+			flex-direction: column;
+		}
+
+		.main-pane {
+			width: 100% !important;
+			flex-shrink: 0;
+		}
+
+		.split-pane {
+			width: 100% !important;
+			border-left: none;
+			border-top: 1px solid rgba(255, 255, 255, 0.1);
+		}
+
+		.split-layout :global(.resize-handle) {
+			display: none;
+		}
+	}
+</style>

apps/manacore/apps/web/src/routes/(app)/+layout.svelte

@@ -524,7 +524,7 @@
 
 		<!-- Main content -->
 		<main style="padding-bottom: {bottomChromeHeight + 32}px">
-			<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+			<div class="mx-auto max-w-7xl px-3 py-4 sm:px-6 sm:py-8 lg:px-8">
 				{@render children()}
 			</div>
 		</main>

packages/shared-ui/src/navigation/PillNavigation.svelte

@@ -874,6 +874,30 @@
 		display: none;
 	}
 
+	/* Mobile: tighter padding, icon-only pills */
+	@media (max-width: 640px) {
+		.pill-nav-container {
+			padding: 0.375rem 0.75rem;
+			gap: 0.5rem;
+		}
+
+		.pill-label {
+			display: none;
+		}
+
+		.pill {
+			padding: 0.625rem;
+			min-width: 44px;
+			min-height: 44px;
+			justify-content: center;
+		}
+
+		.pill-icon {
+			width: 1.25rem;
+			height: 1.25rem;
+		}
+	}
+
 	/* Base pill styles */
 	.pill {
 		display: flex;

packages/shared-ui/src/quick-input/InputBar.svelte

@@ -586,6 +586,20 @@
 		z-index: auto;
 	}
 
+	/* Mobile: tighter padding, full-width input */
+	@media (max-width: 640px) {
+		.quick-input-bar {
+			padding: 0.5rem 0.5rem;
+			height: 64px;
+		}
+
+		.input-container {
+			padding: 0.5rem 1rem;
+			height: 48px;
+			gap: 0.5rem;
+		}
+	}
+
 	/* Leave space for FAB on mobile */
 	@media (max-width: 900px) {
 		.quick-input-bar.has-fab-right {