From 92d8275704c439944eaa414e1c65270e797dcf1c Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 5 Apr 2026 18:24:07 +0200
Subject: [PATCH] feat(manacore/web): complete mobile responsiveness for all
 modules and shared components

ListViews (25 remaining modules):
- All module ListViews now have responsive container padding (p-3 sm:p-4)
- All interactive items have min-h-[44px] touch targets on mobile
- Picture/Moodlit grids: grid-cols-2 on mobile, grid-cols-3 on desktop

DetailViews (17 modules):
- All DetailViews have reduced padding on mobile (0.75rem vs 1rem)
- All buttons, inputs, selects have min-height: 44px on mobile

Modals (14 components):
- Shared Modal.svelte: bottom-sheet pattern on mobile (slides up from bottom)
- 13 app-specific modals: same bottom-sheet treatment
- Reduced padding, larger close buttons, max-h-[95vh] on mobile

Shared UI components:
- GlobalSpotlight: bottom-sheet on mobile, prevents iOS zoom, hides keyboard hints
- PillDropdown: full-width bottom-sheet on mobile with backdrop
- AppDrawer: 44px touch targets on buttons and search
- TagStrip: 44px min-height on all pill buttons
- ToastContainer: larger touch targets, safe-area positioning

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../my-data/DeleteConfirmationModal.svelte    |  8 ++-
 .../components/my-data/QRExportModal.svelte   |  4 +-
 .../profile/ChangePasswordModal.svelte        |  8 ++-
 .../profile/DeleteAccountModal.svelte         |  8 ++-
 .../profile/EditProfileModal.svelte           |  8 ++-
 .../lib/modules/automations/ListView.svelte   | 10 ++++
 .../web/src/lib/modules/calc/ListView.svelte  |  2 +-
 .../modules/calendar/views/DetailView.svelte  | 14 +++++
 .../web/src/lib/modules/cards/ListView.svelte |  4 +-
 .../cards/components/CreateDeckModal.svelte   |  4 +-
 .../lib/modules/cards/views/DetailView.svelte | 11 ++++
 .../lib/modules/citycorners/ListView.svelte   |  4 +-
 .../citycorners/views/DetailView.svelte       | 14 +++++
 .../modules/contacts/views/DetailView.svelte  | 15 ++++++
 .../src/lib/modules/context/ListView.svelte   |  6 +--
 .../src/lib/modules/finance/ListView.svelte   | 10 ++++
 .../src/lib/modules/habits/ListView.svelte    | 10 ++++
 .../src/lib/modules/inventar/ListView.svelte  |  4 +-
 .../modules/inventar/views/DetailView.svelte  | 12 +++++
 .../src/lib/modules/memoro/ListView.svelte    |  4 +-
 .../modules/memoro/views/DetailView.svelte    | 13 +++++
 .../src/lib/modules/moodlit/ListView.svelte   |  4 +-
 .../web/src/lib/modules/music/ListView.svelte |  4 +-
 .../lib/modules/music/views/DetailView.svelte | 13 +++++
 .../web/src/lib/modules/notes/ListView.svelte | 10 ++++
 .../src/lib/modules/nutriphi/ListView.svelte  |  4 +-
 .../src/lib/modules/photos/ListView.svelte    | 10 ++++
 .../components/albums/CreateAlbumModal.svelte |  6 ++-
 .../src/lib/modules/picture/ListView.svelte   |  4 +-
 .../src/lib/modules/places/ListView.svelte    | 10 ++++
 .../modules/places/views/DetailView.svelte    | 16 ++++++
 .../src/lib/modules/planta/ListView.svelte    |  4 +-
 .../modules/planta/views/DetailView.svelte    | 13 +++++
 .../lib/modules/playground/ListView.svelte    |  6 ++-
 .../web/src/lib/modules/presi/ListView.svelte |  4 +-
 .../lib/modules/presi/views/DetailView.svelte | 10 ++++
 .../src/lib/modules/questions/ListView.svelte |  4 +-
 .../modules/questions/views/DetailView.svelte | 12 +++++
 .../src/lib/modules/skilltree/ListView.svelte |  4 +-
 .../skilltree/components/AddSkillModal.svelte |  6 ++-
 .../skilltree/components/AddXpModal.svelte    |  6 ++-
 .../components/EditSkillModal.svelte          |  6 ++-
 .../modules/skilltree/views/DetailView.svelte | 16 ++++++
 .../src/lib/modules/storage/ListView.svelte   |  6 +--
 .../modules/storage/views/DetailView.svelte   | 10 ++++
 .../web/src/lib/modules/times/ListView.svelte |  4 +-
 .../lib/modules/times/views/DetailView.svelte | 15 ++++++
 .../todo/components/OnboardingModal.svelte    |  6 ++-
 .../todo/components/TaskEditModal.svelte      |  4 +-
 .../board-views/ViewEditorModal.svelte        |  6 ++-
 .../lib/modules/todo/views/DetailView.svelte  | 18 +++++++
 .../web/src/lib/modules/uload/ListView.svelte |  4 +-
 .../lib/modules/uload/views/DetailView.svelte | 13 +++++
 .../src/lib/modules/zitare/ListView.svelte    |  7 ++-
 .../modules/zitare/views/DetailView.svelte    | 10 ++++
 .../shared-ui/src/navigation/AppDrawer.svelte |  8 +++
 .../src/navigation/GlobalSpotlight.svelte     | 38 +++++++++++--
 .../src/navigation/PillDropdown.svelte        | 53 +++++++++++++++++++
 .../shared-ui/src/navigation/TagStrip.svelte  |  1 +
 packages/shared-ui/src/organisms/Modal.svelte | 14 ++---
 .../shared-ui/src/toast/ToastContainer.svelte | 18 ++++---
 61 files changed, 499 insertions(+), 81 deletions(-)

diff --git a/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte b/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
index c6efe8cf9..fadd00205 100644
--- a/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/my-data/DeleteConfirmationModal.svelte
@@ -39,10 +39,14 @@
 {#if show}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+		class="fixed inset-0 bg-black/50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
 		onclick={handleBackdropClick}
 	>
-		<div class="bg-card rounded-xl shadow-xl max-w-md w-full" role="dialog" aria-modal="true">
+		<div
+			class="bg-card rounded-t-xl sm:rounded-xl shadow-xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh]"
+			role="dialog"
+			aria-modal="true"
+		>
 			{#if deleteResult}
 				<!-- Success State -->
 				<div class="p-6">
diff --git a/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte b/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
index e99886c6d..f15545290 100644
--- a/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/my-data/QRExportModal.svelte
@@ -108,11 +108,11 @@
 {#if show}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+		class="fixed inset-0 bg-black/50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
 		onclick={handleBackdropClick}
 	>
 		<div
-			class="bg-card rounded-xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto"
+			class="bg-card rounded-t-xl sm:rounded-xl shadow-xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh] overflow-y-auto"
 			role="dialog"
 			aria-modal="true"
 		>
diff --git a/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
index e296dc62b..07f4bb638 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/ChangePasswordModal.svelte
@@ -78,10 +78,14 @@
 {#if show}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+		class="fixed inset-0 bg-black/50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
 		onclick={handleBackdropClick}
 	>
-		<div class="bg-card rounded-xl shadow-xl max-w-md w-full" role="dialog" aria-modal="true">
+		<div
+			class="bg-card rounded-t-xl sm:rounded-xl shadow-xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh]"
+			role="dialog"
+			aria-modal="true"
+		>
 			<div class="p-6">
 				<div class="flex items-center gap-3 mb-6">
 					<div
diff --git a/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
index c2de98583..88d1283b6 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/DeleteAccountModal.svelte
@@ -71,10 +71,14 @@
 {#if show}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+		class="fixed inset-0 bg-black/50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
 		onclick={handleBackdropClick}
 	>
-		<div class="bg-card rounded-xl shadow-xl max-w-md w-full" role="dialog" aria-modal="true">
+		<div
+			class="bg-card rounded-t-xl sm:rounded-xl shadow-xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh]"
+			role="dialog"
+			aria-modal="true"
+		>
 			<div class="p-6">
 				<div class="flex items-center gap-3 mb-4">
 					<div
diff --git a/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte b/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
index 0557db0f5..a395e3f8c 100644
--- a/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
+++ b/apps/manacore/apps/web/src/lib/components/profile/EditProfileModal.svelte
@@ -141,10 +141,14 @@
 {#if show}
 	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4"
+		class="fixed inset-0 bg-black/50 flex items-end sm:items-center justify-center z-50 p-0 sm:p-4"
 		onclick={handleBackdropClick}
 	>
-		<div class="bg-card rounded-xl shadow-xl max-w-md w-full" role="dialog" aria-modal="true">
+		<div
+			class="bg-card rounded-t-xl sm:rounded-xl shadow-xl max-w-md w-full max-h-[95vh] sm:max-h-[90vh]"
+			role="dialog"
+			aria-modal="true"
+		>
 			<div class="p-6">
 				<div class="flex items-center gap-3 mb-6">
 					<div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center">
diff --git a/apps/manacore/apps/web/src/lib/modules/automations/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/automations/ListView.svelte
index e0b561650..eed80575c 100644
--- a/apps/manacore/apps/web/src/lib/modules/automations/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/automations/ListView.svelte
@@ -701,4 +701,14 @@
 		color: var(--color-muted-foreground);
 		margin: 0 0 0.5rem;
 	}
+
+	@media (max-width: 640px) {
+		.automations-view {
+			padding: 0.5rem;
+		}
+		.auto-card {
+			padding: 0.75rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/calc/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/calc/ListView.svelte
index 193b4d807..e8c0616b4 100644
--- a/apps/manacore/apps/web/src/lib/modules/calc/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/calc/ListView.svelte
@@ -49,7 +49,7 @@
 	}
 </script>
 
-<div class="flex h-full flex-col gap-4 p-4">
+<div class="flex h-full flex-col gap-4 p-3 sm:p-4">
 	<!-- Display -->
 	<div class="rounded-md bg-white/5 p-3 text-right">
 		<p class="text-xs text-white/40">{expression || ' '}</p>
diff --git a/apps/manacore/apps/web/src/lib/modules/calendar/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/calendar/views/DetailView.svelte
index 6fa986285..eb27a1262 100644
--- a/apps/manacore/apps/web/src/lib/modules/calendar/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/calendar/views/DetailView.svelte
@@ -484,4 +484,18 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.tag-pill {
+			min-height: 44px;
+		}
+		.prop-input,
+		.allday-label {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/cards/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/cards/ListView.svelte
index 5d8d835b5..33549ba30 100644
--- a/apps/manacore/apps/web/src/lib/modules/cards/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/cards/ListView.svelte
@@ -47,7 +47,7 @@
 	}
 </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">
 	<div class="flex items-center justify-between">
 		<p class="text-xs text-white/40">{decks.length} Decks</p>
 		<p class="text-xs text-amber-400/70">{dueForReview()} fällig</p>
@@ -62,7 +62,7 @@
 						_siblingIds: decks.map((d) => d.id),
 						_siblingKey: 'deckId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<div class="flex items-center gap-2">
 					<div class="h-3 w-3 rounded" style="background: {deck.color}"></div>
diff --git a/apps/manacore/apps/web/src/lib/modules/cards/components/CreateDeckModal.svelte b/apps/manacore/apps/web/src/lib/modules/cards/components/CreateDeckModal.svelte
index 49965f42f..ef8c2eb9c 100644
--- a/apps/manacore/apps/web/src/lib/modules/cards/components/CreateDeckModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/cards/components/CreateDeckModal.svelte
@@ -51,11 +51,11 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+		class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/50"
 		onclick={handleClose}
 	>
 		<div
-			class="mx-4 w-full max-w-md rounded-xl border border-border bg-card p-6 shadow-xl"
+			class="w-full max-w-md rounded-t-xl sm:rounded-xl border border-border bg-card p-6 shadow-xl max-h-[95vh] sm:max-h-[90vh] sm:mx-4"
 			onclick={(e) => e.stopPropagation()}
 		>
 			<h2 class="mb-4 text-xl font-semibold text-foreground">Neues Deck erstellen</h2>
diff --git a/apps/manacore/apps/web/src/lib/modules/cards/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/cards/views/DetailView.svelte
index dae352167..5939fa4c9 100644
--- a/apps/manacore/apps/web/src/lib/modules/cards/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/cards/views/DetailView.svelte
@@ -378,4 +378,15 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.toggle-btn,
+		.color-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/citycorners/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/citycorners/ListView.svelte
index 871ef3612..c4a43f9af 100644
--- a/apps/manacore/apps/web/src/lib/modules/citycorners/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/citycorners/ListView.svelte
@@ -55,7 +55,7 @@
 	};
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{locations.length} Orte</span>
 		<span>{favorites.length} Favoriten</span>
@@ -70,7 +70,7 @@
 						_siblingIds: locations.map((l) => l.id),
 						_siblingKey: 'locationId',
 					})}
-				class="flex w-full items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-white/5 cursor-pointer text-left"
+				class="flex w-full min-h-[44px] items-start gap-2 rounded-md px-2 py-2 transition-colors hover:bg-white/5 cursor-pointer text-left"
 			>
 				<div
 					class="mt-0.5 h-2.5 w-2.5 shrink-0 rounded-full"
diff --git a/apps/manacore/apps/web/src/lib/modules/citycorners/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/citycorners/views/DetailView.svelte
index f4be32d29..270549ca2 100644
--- a/apps/manacore/apps/web/src/lib/modules/citycorners/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/citycorners/views/DetailView.svelte
@@ -409,4 +409,18 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.fav-btn,
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-select,
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/contacts/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/contacts/views/DetailView.svelte
index 5585c62d5..8a3d65f59 100644
--- a/apps/manacore/apps/web/src/lib/modules/contacts/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/contacts/views/DetailView.svelte
@@ -629,4 +629,19 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.fav-btn,
+		.action-btn,
+		.tag-pill {
+			min-height: 44px;
+		}
+		.field-input,
+		.name-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/context/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/context/ListView.svelte
index 1b72efd84..1b36c551d 100644
--- a/apps/manacore/apps/web/src/lib/modules/context/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/context/ListView.svelte
@@ -45,7 +45,7 @@
 	};
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{spaces.length} Spaces</span>
 		<span>{documents.length} Dokumente</span>
@@ -56,7 +56,7 @@
 		{#if spaces.filter((s) => s.pinned).length > 0}
 			<h3 class="mb-2 text-xs font-medium text-white/50">Angepinnte Spaces</h3>
 			{#each spaces.filter((s) => s.pinned) as space (space.id)}
-				<div class="mb-1 rounded-md px-3 py-2 transition-colors hover:bg-white/5">
+				<div class="mb-1 min-h-[44px] rounded-md px-3 py-2 transition-colors hover:bg-white/5">
 					<p class="text-sm font-medium text-white/80">{space.name}</p>
 					{#if space.description}
 						<p class="truncate text-xs text-white/30">{space.description}</p>
@@ -69,7 +69,7 @@
 		<h3 class="mb-2 mt-3 text-xs font-medium text-white/50">Zuletzt bearbeitet</h3>
 		{#each recentDocs as doc (doc.id)}
 			<div
-				class="flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
+				class="flex min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
 			>
 				<span class="text-sm">{@html typeIcons[doc.type] ?? '&#128196;'}</span>
 				<div class="min-w-0 flex-1">
diff --git a/apps/manacore/apps/web/src/lib/modules/finance/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/finance/ListView.svelte
index 1515711ba..31d292f6e 100644
--- a/apps/manacore/apps/web/src/lib/modules/finance/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/finance/ListView.svelte
@@ -470,4 +470,14 @@
 		font-size: 0.8125rem;
 		color: #9ca3af;
 	}
+
+	@media (max-width: 640px) {
+		.app-view {
+			padding: 0.75rem;
+		}
+		.tx-item {
+			padding: 0.625rem 0.375rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/habits/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/habits/ListView.svelte
index a838e41d6..2c5c65213 100644
--- a/apps/manacore/apps/web/src/lib/modules/habits/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/habits/ListView.svelte
@@ -558,4 +558,14 @@
 			box-shadow: 0 0 0 12px rgba(139, 92, 246, 0);
 		}
 	}
+
+	@media (max-width: 640px) {
+		.habits-list-view {
+			padding: 0.5rem;
+		}
+		.tally-item {
+			padding: 0.625rem 0.375rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/inventar/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/inventar/ListView.svelte
index 810a5ad88..8b9321ba8 100644
--- a/apps/manacore/apps/web/src/lib/modules/inventar/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/inventar/ListView.svelte
@@ -47,7 +47,7 @@
 	});
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{items.length} Gegenstände</span>
 		{#if totalValue() > 0}
@@ -64,7 +64,7 @@
 						_siblingIds: collections.map((c) => c.id),
 						_siblingKey: 'collectionId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<div class="flex items-center gap-2">
 					{#if collection.icon}
diff --git a/apps/manacore/apps/web/src/lib/modules/inventar/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/inventar/views/DetailView.svelte
index 193963a24..a5e77b3c3 100644
--- a/apps/manacore/apps/web/src/lib/modules/inventar/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/inventar/views/DetailView.svelte
@@ -356,4 +356,16 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/memoro/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/memoro/ListView.svelte
index 156363d4e..126642474 100644
--- a/apps/manacore/apps/web/src/lib/modules/memoro/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/memoro/ListView.svelte
@@ -46,7 +46,7 @@
 	};
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{memos.length} Memos</span>
 		<span>{pinned.length} angepinnt</span>
@@ -61,7 +61,7 @@
 						_siblingIds: sorted.map((m) => m.id),
 						_siblingKey: 'memoId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<div class="flex items-start justify-between gap-2">
 					<div class="min-w-0 flex-1">
diff --git a/apps/manacore/apps/web/src/lib/modules/memoro/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/memoro/views/DetailView.svelte
index 3ec625be6..8a7a0044f 100644
--- a/apps/manacore/apps/web/src/lib/modules/memoro/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/memoro/views/DetailView.svelte
@@ -402,4 +402,17 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.pin-btn,
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/moodlit/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/moodlit/ListView.svelte
index 295d3be6d..6aa16e5b7 100644
--- a/apps/manacore/apps/web/src/lib/modules/moodlit/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/moodlit/ListView.svelte
@@ -76,7 +76,7 @@
 	);
 </script>
 
-<div class="flex h-full flex-col gap-4 p-4">
+<div class="flex h-full flex-col gap-4 p-3 sm:p-4">
 	<!-- Active mood preview -->
 	{#if activeMood}
 		<div
@@ -93,7 +93,7 @@
 
 	<!-- Mood grid -->
 	<div class="flex-1 overflow-auto">
-		<div class="grid grid-cols-3 gap-2">
+		<div class="grid grid-cols-2 sm:grid-cols-3 gap-2">
 			{#each moods as mood (mood.id)}
 				<button
 					onclick={() => (activeMoodId = activeMoodId === mood.id ? null : mood.id)}
diff --git a/apps/manacore/apps/web/src/lib/modules/music/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/music/ListView.svelte
index 8de824d9c..7f939ec76 100644
--- a/apps/manacore/apps/web/src/lib/modules/music/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/music/ListView.svelte
@@ -54,7 +54,7 @@
 	}
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{songs.length} Songs</span>
 		<span>{playlists.length} Playlists</span>
@@ -71,7 +71,7 @@
 						_siblingIds: recentlyPlayed.map((s) => s.id),
 						_siblingKey: 'songId',
 					})}
-				class="flex w-full items-center gap-3 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 cursor-pointer text-left"
+				class="flex w-full min-h-[44px] items-center gap-3 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 cursor-pointer text-left"
 			>
 				<div
 					class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-white/10 text-xs text-white/30"
diff --git a/apps/manacore/apps/web/src/lib/modules/music/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/music/views/DetailView.svelte
index 43637875b..220886a95 100644
--- a/apps/manacore/apps/web/src/lib/modules/music/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/music/views/DetailView.svelte
@@ -367,4 +367,17 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.fav-btn,
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/notes/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/notes/ListView.svelte
index 43f369f3f..d85ab5ad5 100644
--- a/apps/manacore/apps/web/src/lib/modules/notes/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/notes/ListView.svelte
@@ -449,4 +449,14 @@
 		font-size: 0.8125rem;
 		color: #9ca3af;
 	}
+
+	@media (max-width: 640px) {
+		.app-view {
+			padding: 0.75rem;
+		}
+		.note-item {
+			padding: 0.625rem 0.375rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/nutriphi/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/nutriphi/ListView.svelte
index 0168053b6..9d764e481 100644
--- a/apps/manacore/apps/web/src/lib/modules/nutriphi/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/nutriphi/ListView.svelte
@@ -58,7 +58,7 @@
 	};
 </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">
 	<!-- Calorie progress -->
 	<div class="text-center">
 		<p class="text-2xl font-light text-white/90">{Math.round(totalCalories)}</p>
@@ -90,7 +90,7 @@
 	<!-- Today's meals -->
 	<div class="flex-1 overflow-auto">
 		{#each todayMeals as meal (meal.id)}
-			<div class="mb-1 rounded-md px-3 py-2 transition-colors hover:bg-white/5">
+			<div class="mb-1 min-h-[44px] rounded-md px-3 py-2 transition-colors hover:bg-white/5">
 				<div class="flex items-center justify-between">
 					<span class="text-xs text-white/50">{mealTypeLabels[meal.mealType] ?? meal.mealType}</span
 					>
diff --git a/apps/manacore/apps/web/src/lib/modules/photos/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/photos/ListView.svelte
index 57060504f..f3a0b4140 100644
--- a/apps/manacore/apps/web/src/lib/modules/photos/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/photos/ListView.svelte
@@ -440,4 +440,14 @@
 			transform: rotate(360deg);
 		}
 	}
+
+	@media (max-width: 640px) {
+		.photos-list-view {
+			padding: 0.5rem;
+		}
+		.album-row {
+			padding: 0.625rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/photos/components/albums/CreateAlbumModal.svelte b/apps/manacore/apps/web/src/lib/modules/photos/components/albums/CreateAlbumModal.svelte
index 09cff0512..bed2d99c6 100644
--- a/apps/manacore/apps/web/src/lib/modules/photos/components/albums/CreateAlbumModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/photos/components/albums/CreateAlbumModal.svelte
@@ -38,10 +38,12 @@
 
 <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
 <div
-	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+	class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/50 p-0 sm:p-4"
 	onclick={handleBackdropClick}
 >
-	<div class="w-full max-w-md rounded-xl border border-border bg-background-card p-6">
+	<div
+		class="w-full max-w-md rounded-t-xl sm:rounded-xl border border-border bg-background-card p-6 max-h-[95vh] sm:max-h-[90vh]"
+	>
 		<header class="mb-6 flex items-center justify-between">
 			<h2 class="text-lg font-semibold text-foreground">Album erstellen</h2>
 			<button
diff --git a/apps/manacore/apps/web/src/lib/modules/picture/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/picture/ListView.svelte
index e1e8c82ea..139ce5147 100644
--- a/apps/manacore/apps/web/src/lib/modules/picture/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/picture/ListView.svelte
@@ -26,14 +26,14 @@
 	const favoriteCount = $derived(images.filter((i) => i.isFavorite).length);
 </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">
 	<div class="flex items-center justify-between">
 		<p class="text-xs text-white/40">{images.length} Bilder</p>
 		<p class="text-xs text-white/40">{favoriteCount} Favoriten</p>
 	</div>
 
 	<div class="flex-1 overflow-auto">
-		<div class="grid grid-cols-3 gap-1.5">
+		<div class="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
 			{#each sorted as image (image.id)}
 				<div class="group relative aspect-square overflow-hidden rounded-md bg-white/5">
 					{#if image.publicUrl}
diff --git a/apps/manacore/apps/web/src/lib/modules/places/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/places/ListView.svelte
index bd24d369f..6f50f1c59 100644
--- a/apps/manacore/apps/web/src/lib/modules/places/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/places/ListView.svelte
@@ -534,4 +534,14 @@
 			opacity: 0.3;
 		}
 	}
+
+	@media (max-width: 640px) {
+		.places-list-view {
+			padding: 0.5rem;
+		}
+		.place-item {
+			padding: 0.625rem;
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/places/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/places/views/DetailView.svelte
index 9a51171a4..90064077e 100644
--- a/apps/manacore/apps/web/src/lib/modules/places/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/places/views/DetailView.svelte
@@ -600,4 +600,20 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.fav-btn,
+		.action-btn,
+		.tag-pill {
+			min-height: 44px;
+		}
+		.field-input,
+		.field-textarea,
+		.field-select {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/planta/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/planta/ListView.svelte
index 9ab747b1e..9ff3720bf 100644
--- a/apps/manacore/apps/web/src/lib/modules/planta/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/planta/ListView.svelte
@@ -58,7 +58,7 @@
 	};
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{plants.length} Pflanzen</span>
 		{#if dueForWatering.length > 0}
@@ -80,7 +80,7 @@
 						_siblingIds: plants.map((p) => p.id),
 						_siblingKey: 'plantId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<div class="flex items-center gap-2">
 					<span class="text-sm"
diff --git a/apps/manacore/apps/web/src/lib/modules/planta/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/planta/views/DetailView.svelte
index f6689f029..d9d3bf577 100644
--- a/apps/manacore/apps/web/src/lib/modules/planta/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/planta/views/DetailView.svelte
@@ -408,4 +408,17 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-select,
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/playground/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/playground/ListView.svelte
index c14909c48..e2dd37d67 100644
--- a/apps/manacore/apps/web/src/lib/modules/playground/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/playground/ListView.svelte
@@ -30,7 +30,7 @@
 	}
 </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">
 	<!-- Model selector -->
 	<select
 		bind:value={selectedModel}
@@ -45,7 +45,9 @@
 	<div class="flex-1 overflow-auto">
 		{#each messages as msg, i}
 			<div
-				class="mb-2 rounded-md px-3 py-2 {msg.role === 'user' ? 'bg-white/5' : 'bg-blue-500/10'}"
+				class="mb-2 min-h-[44px] rounded-md px-3 py-2 {msg.role === 'user'
+					? 'bg-white/5'
+					: 'bg-blue-500/10'}"
 			>
 				<p class="text-[10px] text-white/30">{msg.role === 'user' ? 'Du' : modelLabel}</p>
 				<p class="text-sm text-white/70">{msg.content}</p>
diff --git a/apps/manacore/apps/web/src/lib/modules/presi/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/presi/ListView.svelte
index 15293b224..d4f801156 100644
--- a/apps/manacore/apps/web/src/lib/modules/presi/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/presi/ListView.svelte
@@ -42,7 +42,7 @@
 	}
 </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">{decks.length} Präsentationen</p>
 
 	<div class="flex-1 overflow-auto">
@@ -54,7 +54,7 @@
 						_siblingIds: decks.map((d) => d.id),
 						_siblingKey: 'deckId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<p class="truncate text-sm font-medium text-white/80">{deck.title}</p>
 				<div class="mt-1 flex items-center gap-2 text-xs text-white/40">
diff --git a/apps/manacore/apps/web/src/lib/modules/presi/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/presi/views/DetailView.svelte
index c451f58ea..eed7bfbd4 100644
--- a/apps/manacore/apps/web/src/lib/modules/presi/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/presi/views/DetailView.svelte
@@ -341,4 +341,14 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.toggle-btn {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/questions/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/questions/ListView.svelte
index 3bda85776..6d760b593 100644
--- a/apps/manacore/apps/web/src/lib/modules/questions/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/questions/ListView.svelte
@@ -58,7 +58,7 @@
 	);
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{questions.length} Fragen</span>
 		<span>{collections.length} Sammlungen</span>
@@ -73,7 +73,7 @@
 						_siblingIds: sorted.map((q) => q.id),
 						_siblingKey: 'questionId',
 					})}
-				class="mb-2 w-full text-left rounded-md border border-white/10 px-3 py-2.5 transition-colors hover:bg-white/5 cursor-pointer"
+				class="mb-2 w-full text-left rounded-md border border-white/10 px-3 py-2.5 transition-colors hover:bg-white/5 cursor-pointer min-h-[44px]"
 			>
 				<div class="flex items-start justify-between gap-2">
 					<p class="text-sm font-medium text-white/80">{question.title}</p>
diff --git a/apps/manacore/apps/web/src/lib/modules/questions/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/questions/views/DetailView.svelte
index a8f741d12..834b7e2ff 100644
--- a/apps/manacore/apps/web/src/lib/modules/questions/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/questions/views/DetailView.svelte
@@ -403,4 +403,16 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn {
+			min-height: 44px;
+		}
+		.prop-select {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/skilltree/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/skilltree/ListView.svelte
index 219202020..dbba7c137 100644
--- a/apps/manacore/apps/web/src/lib/modules/skilltree/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/skilltree/ListView.svelte
@@ -42,7 +42,7 @@
 	const highestLevel = $derived(Math.max(0, ...skills.map((s) => s.level)));
 </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">
 	<!-- Stats -->
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{totalXp} XP</span>
@@ -62,7 +62,7 @@
 						_siblingIds: skills.map((s) => s.id),
 						_siblingKey: 'skillId',
 					})}
-				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5"
+				class="mb-2 w-full rounded-md border border-white/10 px-3 py-2.5 text-left transition-colors hover:bg-white/5 min-h-[44px]"
 			>
 				<div class="flex items-center justify-between">
 					<div class="flex items-center gap-2">
diff --git a/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddSkillModal.svelte b/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddSkillModal.svelte
index 7da2aa8bc..e6489cb07 100644
--- a/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddSkillModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddSkillModal.svelte
@@ -40,12 +40,14 @@
 </script>
 
 <div
-	class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+	class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
 	onclick={handleBackdropClick}
 	role="dialog"
 	aria-modal="true"
 >
-	<div class="mx-4 w-full max-w-md rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl">
+	<div
+		class="w-full max-w-md rounded-t-2xl sm:rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl max-h-[95vh] sm:max-h-[90vh] sm:mx-4"
+	>
 		<!-- Header -->
 		<div class="mb-6 flex items-center justify-between">
 			<h2 class="text-xl font-bold text-white">Neuer Skill</h2>
diff --git a/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddXpModal.svelte b/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddXpModal.svelte
index 11d21a8f3..108a9a53a 100644
--- a/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddXpModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/skilltree/components/AddXpModal.svelte
@@ -53,12 +53,14 @@
 </script>
 
 <div
-	class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+	class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
 	onclick={handleBackdropClick}
 	role="dialog"
 	aria-modal="true"
 >
-	<div class="mx-4 w-full max-w-md rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl">
+	<div
+		class="w-full max-w-md rounded-t-2xl sm:rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl max-h-[95vh] sm:max-h-[90vh] sm:mx-4"
+	>
 		<!-- Header -->
 		<div class="mb-6 flex items-center justify-between">
 			<div>
diff --git a/apps/manacore/apps/web/src/lib/modules/skilltree/components/EditSkillModal.svelte b/apps/manacore/apps/web/src/lib/modules/skilltree/components/EditSkillModal.svelte
index 529e1beac..1a79f41b8 100644
--- a/apps/manacore/apps/web/src/lib/modules/skilltree/components/EditSkillModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/skilltree/components/EditSkillModal.svelte
@@ -49,12 +49,14 @@
 </script>
 
 <div
-	class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
+	class="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-sm"
 	onclick={handleBackdropClick}
 	role="dialog"
 	aria-modal="true"
 >
-	<div class="mx-4 w-full max-w-md rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl">
+	<div
+		class="w-full max-w-md rounded-t-2xl sm:rounded-2xl border border-gray-700 bg-gray-800 p-6 shadow-xl max-h-[95vh] sm:max-h-[90vh] sm:mx-4"
+	>
 		<!-- Header -->
 		<div class="mb-6 flex items-center justify-between">
 			<h2 class="text-xl font-bold text-white">Skill bearbeiten</h2>
diff --git a/apps/manacore/apps/web/src/lib/modules/skilltree/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
index 92335a34b..357e3fb3a 100644
--- a/apps/manacore/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/skilltree/views/DetailView.svelte
@@ -510,4 +510,20 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.xp-btn {
+			min-height: 44px;
+		}
+		.prop-select,
+		.prop-input,
+		.xp-input,
+		.xp-desc-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/storage/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/storage/ListView.svelte
index e6efaeac8..e4c90959f 100644
--- a/apps/manacore/apps/web/src/lib/modules/storage/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/storage/ListView.svelte
@@ -56,7 +56,7 @@
 	}
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{folders.length} Ordner</span>
 		<span>{files.length} Dateien</span>
@@ -68,7 +68,7 @@
 			<h3 class="mb-2 text-xs font-medium text-white/50">Ordner</h3>
 			{#each folders.filter((f) => !f.parentFolderId) as folder (folder.id)}
 				<div
-					class="flex items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
+					class="flex min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5"
 				>
 					<span class="text-sm" style="color: {folder.color ?? '#6b7280'}">&#128193;</span>
 					<span class="truncate text-sm text-white/70">{folder.name}</span>
@@ -86,7 +86,7 @@
 						_siblingIds: recentFiles.map((f) => f.id),
 						_siblingKey: 'fileId',
 					})}
-				class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-white/5"
+				class="flex w-full min-h-[44px] items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-white/5"
 			>
 				<span class="text-sm">{@html fileIcon(file.mimeType)}</span>
 				<span class="min-w-0 flex-1 truncate text-sm text-white/70">{file.name}</span>
diff --git a/apps/manacore/apps/web/src/lib/modules/storage/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/storage/views/DetailView.svelte
index 66c045a0b..a795adf75 100644
--- a/apps/manacore/apps/web/src/lib/modules/storage/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/storage/views/DetailView.svelte
@@ -283,4 +283,14 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.fav-btn,
+		.action-btn {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/times/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/times/ListView.svelte
index 3457dec9e..78ecd3e3c 100644
--- a/apps/manacore/apps/web/src/lib/modules/times/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/times/ListView.svelte
@@ -98,7 +98,7 @@
 	}
 </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">
 	<!-- Inline Timer -->
 	<div class="flex items-center gap-2">
 		<button
@@ -141,7 +141,7 @@
 		{#each todayEntries as entry (entry.id)}
 			<button
 				onclick={() => navigate('detail', { entryId: entry.id })}
-				class="mb-1 w-full rounded-md px-3 py-2 text-left transition-colors hover:bg-white/5"
+				class="mb-1 w-full min-h-[44px] rounded-md px-3 py-2 text-left transition-colors hover:bg-white/5"
 			>
 				<div class="flex items-center justify-between">
 					<p class="truncate text-sm text-white/80">
diff --git a/apps/manacore/apps/web/src/lib/modules/times/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/times/views/DetailView.svelte
index a135a81be..90a842260 100644
--- a/apps/manacore/apps/web/src/lib/modules/times/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/times/views/DetailView.svelte
@@ -521,4 +521,19 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.billable-toggle {
+			min-height: 44px;
+		}
+		.prop-select,
+		.prop-input,
+		.dur-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/components/OnboardingModal.svelte b/apps/manacore/apps/web/src/lib/modules/todo/components/OnboardingModal.svelte
index 9eca3930c..54cdba277 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/components/OnboardingModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/todo/components/OnboardingModal.svelte
@@ -54,10 +54,12 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 z-[9997] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm"
+		class="fixed inset-0 z-[9997] flex items-end sm:items-center justify-center bg-black/45 p-0 sm:p-4 backdrop-blur-sm"
 		onclick={(e) => e.target === e.currentTarget && finish()}
 	>
-		<div class="w-full max-w-sm rounded-2xl border border-border bg-card shadow-2xl">
+		<div
+			class="w-full max-w-sm rounded-t-2xl sm:rounded-2xl border border-border bg-card shadow-2xl max-h-[95vh] sm:max-h-[90vh]"
+		>
 			<div class="flex flex-col items-center p-8 text-center">
 				<div class="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
 					<svelte:component this={steps[step].icon} size={32} class="text-primary" />
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/components/TaskEditModal.svelte b/apps/manacore/apps/web/src/lib/modules/todo/components/TaskEditModal.svelte
index 2118b34b3..83e6587d2 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/components/TaskEditModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/todo/components/TaskEditModal.svelte
@@ -91,11 +91,11 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 z-[9995] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm sm:p-8"
+		class="fixed inset-0 z-[9995] flex items-end sm:items-center justify-center bg-black/45 p-0 sm:p-8 backdrop-blur-sm"
 		onclick={handleBackdropClick}
 	>
 		<div
-			class="flex max-h-[calc(100vh-4rem)] w-full max-w-[1040px] flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-2xl max-sm:max-h-[calc(100vh-60px)] max-sm:rounded-b-none"
+			class="flex w-full max-w-[1040px] flex-col overflow-hidden rounded-t-2xl sm:rounded-2xl border border-border bg-card shadow-2xl max-h-[95vh] sm:max-h-[calc(100vh-4rem)]"
 		>
 			<!-- Top bar -->
 			<div
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/components/board-views/ViewEditorModal.svelte b/apps/manacore/apps/web/src/lib/modules/todo/components/board-views/ViewEditorModal.svelte
index bea957fa7..884c50174 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/components/board-views/ViewEditorModal.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/todo/components/board-views/ViewEditorModal.svelte
@@ -97,10 +97,12 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div
-		class="fixed inset-0 z-[9996] flex items-center justify-center bg-black/45 p-4 backdrop-blur-sm"
+		class="fixed inset-0 z-[9996] flex items-end sm:items-center justify-center bg-black/45 p-0 sm:p-4 backdrop-blur-sm"
 		onclick={(e) => e.target === e.currentTarget && onClose()}
 	>
-		<div class="w-full max-w-lg rounded-2xl border border-border bg-card shadow-2xl">
+		<div
+			class="w-full max-w-lg rounded-t-2xl sm:rounded-2xl border border-border bg-card shadow-2xl max-h-[95vh] sm:max-h-[90vh]"
+		>
 			<!-- Header -->
 			<div class="flex items-center justify-between border-b border-border px-5 py-3">
 				<h2 class="text-lg font-semibold text-foreground">
diff --git a/apps/manacore/apps/web/src/lib/modules/todo/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/todo/views/DetailView.svelte
index e2052282c..c7e4ada13 100644
--- a/apps/manacore/apps/web/src/lib/modules/todo/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/todo/views/DetailView.svelte
@@ -700,4 +700,22 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.complete-btn,
+		.action-btn,
+		.schedule-btn,
+		.unschedule-btn,
+		.subtask-item,
+		.tag-pill {
+			min-height: 44px;
+		}
+		.prop-select,
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/uload/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/uload/ListView.svelte
index e6b9e3876..69e51aff7 100644
--- a/apps/manacore/apps/web/src/lib/modules/uload/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/uload/ListView.svelte
@@ -52,7 +52,7 @@
 	}
 </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">
 	<div class="flex gap-3 text-xs text-white/40">
 		<span>{links.length} Links</span>
 		<span>{totalClicks} Klicks</span>
@@ -68,7 +68,7 @@
 						_siblingIds: sorted.map((l) => l.id),
 						_siblingKey: 'linkId',
 					})}
-				class="mb-1 w-full text-left rounded-md px-3 py-2 transition-colors hover:bg-white/5 cursor-pointer"
+				class="mb-1 w-full min-h-[44px] text-left rounded-md px-3 py-2 transition-colors hover:bg-white/5 cursor-pointer"
 			>
 				<div class="flex items-center justify-between">
 					<p class="truncate text-sm font-medium text-white/80">
diff --git a/apps/manacore/apps/web/src/lib/modules/uload/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/uload/views/DetailView.svelte
index be1cd38ed..995dc0f45 100644
--- a/apps/manacore/apps/web/src/lib/modules/uload/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/uload/views/DetailView.svelte
@@ -399,4 +399,17 @@
 		background: rgba(255, 255, 255, 0.06);
 		color: #e5e7eb;
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 0.75rem;
+		}
+		.action-btn,
+		.toggle-label {
+			min-height: 44px;
+		}
+		.prop-input {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/apps/manacore/apps/web/src/lib/modules/zitare/ListView.svelte b/apps/manacore/apps/web/src/lib/modules/zitare/ListView.svelte
index be3cbfc8a..d4d06c91a 100644
--- a/apps/manacore/apps/web/src/lib/modules/zitare/ListView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/zitare/ListView.svelte
@@ -85,7 +85,7 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-	class="flex h-full cursor-pointer flex-col items-center justify-center p-6"
+	class="flex h-full cursor-pointer flex-col items-center justify-center p-4 sm:p-6"
 	onclick={nextQuote}
 	use:dropTarget={{
 		accepts: ['tag'],
@@ -116,7 +116,10 @@
 			</div>
 		{/if}
 
-		<button onclick={toggleFav} class="mt-3 rounded-full p-1.5 transition-colors hover:bg-white/5">
+		<button
+			onclick={toggleFav}
+			class="mt-3 min-h-[44px] rounded-full p-1.5 transition-colors hover:bg-white/5"
+		>
 			<Heart
 				size={16}
 				weight={isFav ? 'fill' : 'regular'}
diff --git a/apps/manacore/apps/web/src/lib/modules/zitare/views/DetailView.svelte b/apps/manacore/apps/web/src/lib/modules/zitare/views/DetailView.svelte
index f19f0e997..056d8c476 100644
--- a/apps/manacore/apps/web/src/lib/modules/zitare/views/DetailView.svelte
+++ b/apps/manacore/apps/web/src/lib/modules/zitare/views/DetailView.svelte
@@ -247,4 +247,14 @@
 		color: #ef4444;
 		border-color: rgba(239, 68, 68, 0.2);
 	}
+
+	@media (max-width: 640px) {
+		.detail-view {
+			padding: 1rem;
+		}
+		.action-btn,
+		.bio-btn {
+			min-height: 44px;
+		}
+	}
 </style>
diff --git a/packages/shared-ui/src/navigation/AppDrawer.svelte b/packages/shared-ui/src/navigation/AppDrawer.svelte
index 21b990026..13f3ab90b 100644
--- a/packages/shared-ui/src/navigation/AppDrawer.svelte
+++ b/packages/shared-ui/src/navigation/AppDrawer.svelte
@@ -406,6 +406,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.75rem 1rem;
+		min-height: 48px;
 		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
@@ -476,6 +477,7 @@
 		align-items: center;
 		gap: 0.375rem;
 		padding: 0.375rem 0.625rem;
+		min-height: 44px;
 		border-radius: 9999px;
 		border: 1px solid rgba(0, 0, 0, 0.08);
 		background: rgba(0, 0, 0, 0.03);
@@ -538,6 +540,7 @@
 		align-items: center;
 		gap: 0.5rem;
 		padding: 0.5rem;
+		min-height: 44px;
 		border-radius: 0.5rem;
 		border: none;
 		background: none;
@@ -590,6 +593,11 @@
 	/* Favorite toggle */
 	.fav-toggle {
 		padding: 0.375rem;
+		min-width: 44px;
+		min-height: 44px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		border: none;
 		background: none;
 		cursor: pointer;
diff --git a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
index fd3d7d1d9..c26993f97 100644
--- a/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
+++ b/packages/shared-ui/src/navigation/GlobalSpotlight.svelte
@@ -480,10 +480,16 @@
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		padding: 1rem 1.25rem;
+		padding: 0.75rem 1rem;
 		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
 	}
 
+	@media (min-width: 641px) {
+		.spotlight-input-wrapper {
+			padding: 1rem 1.25rem;
+		}
+	}
+
 	:global(.dark) .spotlight-input-wrapper {
 		border-bottom-color: rgba(255, 255, 255, 0.1);
 	}
@@ -550,6 +556,7 @@
 		justify-content: space-between;
 		width: 100%;
 		padding: 0.625rem 0.75rem;
+		min-height: 44px;
 		border: none;
 		background: none;
 		border-radius: 0.5rem;
@@ -737,12 +744,37 @@
 	/* Mobile */
 	@media (max-width: 640px) {
 		.spotlight-overlay {
-			padding-top: 1rem;
+			padding-top: 0;
+			align-items: flex-end;
 		}
 
 		.spotlight-modal {
 			max-width: none;
-			margin: 0 0.5rem;
+			margin: 0;
+			border-radius: 1rem 1rem 0 0;
+			max-height: 85vh;
+			animation: spotlightSlideUp 0.2s ease-out;
+		}
+
+		.spotlight-results {
+			max-height: 60vh;
+		}
+
+		.spotlight-footer {
+			display: none;
+		}
+
+		.spotlight-input {
+			font-size: 1rem;
+		}
+	}
+
+	@keyframes spotlightSlideUp {
+		from {
+			transform: translateY(100%);
+		}
+		to {
+			transform: translateY(0);
 		}
 	}
 </style>
diff --git a/packages/shared-ui/src/navigation/PillDropdown.svelte b/packages/shared-ui/src/navigation/PillDropdown.svelte
index 25889ea8b..c4b32bf2b 100644
--- a/packages/shared-ui/src/navigation/PillDropdown.svelte
+++ b/packages/shared-ui/src/navigation/PillDropdown.svelte
@@ -620,4 +620,57 @@
 	:global(.dark) .fan-up .dropdown-footer {
 		border-bottom-color: rgba(255, 255, 255, 0.15);
 	}
+
+	/* Mobile: bottom sheet */
+	@media (max-width: 640px) {
+		.fan-container {
+			position: fixed;
+			top: auto !important;
+			left: 0 !important;
+			right: 0;
+			bottom: 0;
+			width: 100%;
+			max-height: 80vh;
+			overflow-y: auto;
+			padding: 1rem;
+			padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
+			background: rgba(255, 255, 255, 0.95);
+			backdrop-filter: blur(20px);
+			-webkit-backdrop-filter: blur(20px);
+			border-top: 1px solid rgba(0, 0, 0, 0.1);
+			border-radius: 1rem 1rem 0 0;
+			box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.15);
+			transform: none;
+			animation: pillSheetUp 0.2s ease-out;
+		}
+
+		:global(.dark) .fan-container {
+			background: rgba(30, 30, 35, 0.95);
+			border-top-color: rgba(255, 255, 255, 0.12);
+		}
+
+		.fan-up {
+			transform: none;
+			flex-direction: column;
+		}
+
+		.pill,
+		.fan-pill,
+		.submenu-item {
+			min-height: 44px;
+		}
+
+		.menu-backdrop {
+			background: rgba(0, 0, 0, 0.3);
+		}
+	}
+
+	@keyframes pillSheetUp {
+		from {
+			transform: translateY(100%);
+		}
+		to {
+			transform: translateY(0);
+		}
+	}
 </style>
diff --git a/packages/shared-ui/src/navigation/TagStrip.svelte b/packages/shared-ui/src/navigation/TagStrip.svelte
index cd90b639a..2850d2d3f 100644
--- a/packages/shared-ui/src/navigation/TagStrip.svelte
+++ b/packages/shared-ui/src/navigation/TagStrip.svelte
@@ -207,6 +207,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
+		min-height: 44px;
 		cursor: pointer;
 		flex-shrink: 0;
 		transition: all 0.15s ease;
diff --git a/packages/shared-ui/src/organisms/Modal.svelte b/packages/shared-ui/src/organisms/Modal.svelte
index a4b334c12..fe774d3d7 100644
--- a/packages/shared-ui/src/organisms/Modal.svelte
+++ b/packages/shared-ui/src/organisms/Modal.svelte
@@ -54,7 +54,7 @@
 	<!-- Modal Backdrop -->
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
-		class="fixed inset-0 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+		class="fixed inset-0 flex items-end sm:items-center justify-center bg-black/50 backdrop-blur-sm p-0 sm:p-4"
 		style="z-index: 9990;"
 		onclick={handleBackdropClick}
 		onkeydown={(e) => e.key === 'Enter' && handleBackdropClick(e as unknown as MouseEvent)}
@@ -66,15 +66,15 @@
 		<!-- Modal Content -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
-			class="relative flex max-h-[90vh] w-full {maxWidthClasses[
+			class="relative flex max-h-[95vh] sm:max-h-[90vh] w-full {maxWidthClasses[
 				maxWidth
-			]} flex-col rounded-2xl border border-border bg-surface-elevated-2 backdrop-blur-xl shadow-2xl"
+			]} flex-col rounded-t-2xl sm:rounded-2xl border border-border bg-surface-elevated-2 backdrop-blur-xl shadow-2xl"
 			onclick={(e) => e.stopPropagation()}
 			onkeydown={(e) => e.stopPropagation()}
 		>
 			{#if showHeader}
 				<!-- Header -->
-				<div class="flex items-center justify-between p-6 border-b border-border">
+				<div class="flex items-center justify-between p-4 sm:p-6 border-b border-border">
 					<div class="flex items-center gap-3 flex-1">
 						{#if icon}
 							{@render icon()}
@@ -87,7 +87,7 @@
 					</div>
 					<button
 						onclick={onClose}
-						class="p-2 rounded-xl bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 hover:scale-105"
+						class="p-2.5 sm:p-2 rounded-xl bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 hover:scale-105"
 						aria-label="Close"
 					>
 						<X size={18} weight="bold" class="text-muted-foreground" />
@@ -96,13 +96,13 @@
 			{/if}
 
 			<!-- Body (scrollable) -->
-			<div class="flex-1 overflow-y-auto p-6">
+			<div class="flex-1 overflow-y-auto p-4 sm:p-6">
 				{@render children()}
 			</div>
 
 			<!-- Footer (optional) -->
 			{#if footer}
-				<div class="border-t border-border p-6">
+				<div class="border-t border-border p-4 sm:p-6">
 					{@render footer()}
 				</div>
 			{/if}
diff --git a/packages/shared-ui/src/toast/ToastContainer.svelte b/packages/shared-ui/src/toast/ToastContainer.svelte
index d4a6257be..08af806ad 100644
--- a/packages/shared-ui/src/toast/ToastContainer.svelte
+++ b/packages/shared-ui/src/toast/ToastContainer.svelte
@@ -66,12 +66,12 @@
 		max-width: 24rem;
 	}
 
-	/* Mobile: full width at bottom */
+	/* Mobile: full width at bottom, above nav bar */
 	@media (max-width: 640px) {
 		.toast-container {
-			left: 1rem;
-			right: 1rem;
-			bottom: 1rem;
+			left: 0.75rem;
+			right: 0.75rem;
+			bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
 			max-width: none;
 		}
 	}
@@ -81,6 +81,7 @@
 		align-items: flex-start;
 		gap: 0.75rem;
 		padding: 0.75rem 1rem;
+		min-height: 48px;
 		border-radius: 0.75rem;
 		box-shadow:
 			0 10px 15px -3px rgba(0, 0, 0, 0.1),
@@ -105,7 +106,10 @@
 
 	.toast-action {
 		flex-shrink: 0;
-		padding: 0.25rem 0.625rem;
+		padding: 0.375rem 0.75rem;
+		min-height: 36px;
+		display: flex;
+		align-items: center;
 		border-radius: 0.375rem;
 		background: rgba(255, 255, 255, 0.2);
 		border: 1px solid rgba(255, 255, 255, 0.3);
@@ -122,7 +126,9 @@
 
 	.toast-dismiss {
 		flex-shrink: 0;
-		padding: 0.25rem;
+		padding: 0.5rem;
+		min-width: 36px;
+		min-height: 36px;
 		border-radius: 0.5rem;
 		background: transparent;
 		border: none;