From 98dbcefe90ebb664c87af4892f196055c7498462 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 5 Apr 2026 17:23:24 +0200
Subject: [PATCH] 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            | 25 ++++++++++++++++
 .../src/lib/modules/calendar/ListView.svelte  | 17 +++++++++++
 .../web/src/lib/modules/chat/ListView.svelte  |  4 +--
 .../src/lib/modules/contacts/ListView.svelte  |  8 +++++
 .../web/src/lib/modules/todo/ListView.svelte  | 17 +++++++++++
 .../lib/splitscreen/SplitPaneLayout.svelte    | 30 +++++++++++++++++--
 .../apps/web/src/routes/(app)/+layout.svelte  |  2 +-
 .../src/navigation/PillNavigation.svelte      | 24 +++++++++++++++
 .../shared-ui/src/quick-input/InputBar.svelte | 14 +++++++++
 9 files changed, 135 insertions(+), 6 deletions(-)

diff --git a/apps/manacore/apps/web/src/app.css b/apps/manacore/apps/web/src/app.css
index 152f31ace..7f8229134 100644
--- a/apps/manacore/apps/web/src/app.css
+++ b/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);
+	}
 }
diff --git a/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
index e18757c16..9c2a4d273 100644
--- a/apps/manacore/apps/web/src/lib/modules/calendar/ListView.svelte
+++ b/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>
diff --git a/apps/manacore/apps/web/src/lib/modules/chat/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/chat/ListView.svelte
index ea9c63db5..20c4d532a 100644
--- a/apps/manacore/apps/web/src/lib/modules/chat/ListView.svelte
+++ b/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'}
diff --git a/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
index 2976db87c..2780d0be3 100644
--- a/apps/manacore/apps/web/src/lib/modules/contacts/ListView.svelte
+++ b/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>
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
index daae2f2b8..c0ec3f7e7 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/ListView.svelte
+++ b/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>
diff --git a/apps/manacore/apps/web/src/lib/splitscreen/SplitPaneLayout.svelte b/apps/manacore/apps/web/src/lib/splitscreen/SplitPaneLayout.svelte
index 34460ea3a..9fd6626dd 100644
--- a/apps/manacore/apps/web/src/lib/splitscreen/SplitPaneLayout.svelte
+++ b/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>
diff --git a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte b/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
index 2eb8bbd2d..67a367a53 100644
--- a/apps/manacore/apps/web/src/routes/(app)/+layout.svelte
+++ b/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>
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 346919433..6a90e273d 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/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;
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index e374f969c..c7220b1a0 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/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 {