From cdad7f5187bc8c9945470948828f16863b70cc1f Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 13 Feb 2026 19:35:37 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix(calendar):=20improve=20mobil?=
 =?UTF-8?q?e=20UX=20-=20hide=20tasks=20by=20default,=20integrate=20mic=20i?=
 =?UTF-8?q?n=20input=20bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Change sidebarCollapsed default to true (tasks hidden by default on mobile)
- Add leftAction snippet slot to InputBar component
- Move VoiceRecordButton inside InputBar instead of floating position
- Remove obsolete voice-button-wrapper styles

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 apps/matrix/apps/web/src/app.css              | 34 +++++++++++++++++++
 .../lib/components/chat/MessageInput.svelte   |  2 +-
 .../apps/web/src/routes/(app)/+layout.svelte  |  8 +++--
 .../web/src/routes/(app)/chat/+page.svelte    |  4 +--
 .../routes/(app)/chat/[roomId]/+page.svelte   |  2 +-
 .../web/src/routes/(auth)/login/+page.svelte  |  8 ++---
 6 files changed, 48 insertions(+), 10 deletions(-)

diff --git a/apps/matrix/apps/web/src/app.css b/apps/matrix/apps/web/src/app.css
index 2466c3026..f12be897d 100644
--- a/apps/matrix/apps/web/src/app.css
+++ b/apps/matrix/apps/web/src/app.css
@@ -78,3 +78,37 @@
 	@apply bg-white/90 dark:bg-white/20 backdrop-blur-sm border border-black/10 dark:border-white/20
 	       hover:bg-white dark:hover:bg-white/30 hover:shadow-lg transition-all duration-200;
 }
+
+/* iOS Safe Area Insets for PWA */
+.safe-area-top {
+	padding-top: env(safe-area-inset-top, 0px);
+}
+
+.safe-area-bottom {
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-area-left {
+	padding-left: env(safe-area-inset-left, 0px);
+}
+
+.safe-area-right {
+	padding-right: env(safe-area-inset-right, 0px);
+}
+
+.safe-area-x {
+	padding-left: env(safe-area-inset-left, 0px);
+	padding-right: env(safe-area-inset-right, 0px);
+}
+
+.safe-area-y {
+	padding-top: env(safe-area-inset-top, 0px);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.safe-area-all {
+	padding-top: env(safe-area-inset-top, 0px);
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+	padding-left: env(safe-area-inset-left, 0px);
+	padding-right: env(safe-area-inset-right, 0px);
+}
diff --git a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
index 5b53cfc15..8cd02e0cf 100644
--- a/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
+++ b/apps/matrix/apps/web/src/lib/components/chat/MessageInput.svelte
@@ -349,7 +349,7 @@
 	}
 </script>
 
-<div class="p-3 pb-4 lg:pb-20">
+<div class="p-3 pb-4 lg:pb-20 safe-area-bottom">
 	<!-- Reply/Edit Preview -->
 	{#if replyTo || editMessage}
 		<div
diff --git a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
index 27418c5ee..584b39728 100644
--- a/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/+layout.svelte
@@ -217,7 +217,9 @@
 
 {#if loading}
 	<!-- Loading State -->
-	<div class="flex h-screen flex-col items-center justify-center gap-4 bg-background">
+	<div
+		class="flex h-screen flex-col items-center justify-center gap-4 bg-background safe-area-top safe-area-bottom"
+	>
 		<CircleNotch class="h-12 w-12 animate-spin text-primary" />
 		<div class="text-center">
 			<p class="font-medium text-foreground">Connecting to Matrix...</p>
@@ -236,7 +238,9 @@
 	</div>
 {:else if initError}
 	<!-- Error State -->
-	<div class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background">
+	<div
+		class="flex h-screen flex-col items-center justify-center gap-4 p-4 bg-background safe-area-top safe-area-bottom"
+	>
 		<div class="rounded-full bg-red-500/10 p-4">
 			<WarningCircle class="h-12 w-12 text-red-500" />
 		</div>
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
index 658d1af52..cb3965c76 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte
@@ -136,10 +136,10 @@
 
 {#if isMobile}
 	<!-- Mobile: Full-screen room list -->
-	<div class="flex flex-col h-full bg-background">
+	<div class="flex flex-col h-full bg-background safe-area-bottom">
 		<!-- User Info / Status Bar -->
 		<div
-			class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl"
+			class="border-b border-black/10 dark:border-white/10 px-4 py-3 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-xl safe-area-top"
 		>
 			<div class="flex items-center justify-between">
 				<div>
diff --git a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
index 73abd5b7d..550b5fb2f 100644
--- a/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(app)/chat/[roomId]/+page.svelte
@@ -114,7 +114,7 @@
 </script>
 
 <!-- Full-screen chat view for mobile -->
-<div class="flex flex-col h-full bg-background">
+<div class="flex flex-col h-full bg-background safe-area-top">
 	{#if matrixStore.currentRoom}
 		<!-- Room Header with back button -->
 		<RoomHeader
diff --git a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
index 66cf3053c..c4950042b 100644
--- a/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
+++ b/apps/matrix/apps/web/src/routes/(auth)/login/+page.svelte
@@ -339,8 +339,8 @@
 
 	.theme-toggle {
 		position: absolute;
-		top: 1rem;
-		left: 1rem;
+		top: calc(1rem + env(safe-area-inset-top, 0px));
+		left: calc(1rem + env(safe-area-inset-left, 0px));
 		z-index: 50;
 		display: flex;
 		align-items: center;
@@ -381,7 +381,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 3rem 1rem 1.5rem;
+		padding: calc(3rem + env(safe-area-inset-top, 0px)) 1rem 1.5rem;
 		animation: fadeInScale 0.5s ease-out both;
 	}
 
@@ -428,7 +428,7 @@
 		flex: 1;
 		display: flex;
 		justify-content: center;
-		padding: 1rem 1rem 2rem;
+		padding: 1rem 1rem calc(2rem + env(safe-area-inset-bottom, 0px));
 	}
 
 	.form-card {