From ef69274cb0d39a5d90db920546997a62262fd895 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 13 Dec 2025 13:55:13 +0100
Subject: [PATCH] fix(calendar): increase spacing between InputBar and toolbar
 correctly
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Increased InputBar bottomOffset from 130px to 150px when toolbar is open
- Updated FAB position to match (150px + 9px)
- Updated DateStrip positions accordingly (220px, 150px)
- Removed ineffective padding-top from toolbar-bar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../calendar/CalendarToolbar.svelte           |  3 +-
 .../lib/components/calendar/DateStrip.svelte  | 29 +++++++++++--------
 .../apps/web/src/routes/(app)/+layout.svelte  |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
index c6a250d3b..919df21db 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -107,7 +107,7 @@
 
 	/* When expanded, move FAB up with InputBar */
 	.fab-container.expanded {
-		bottom: calc(130px + 9px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(150px + 9px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.fab-container.sidebar-mode {
@@ -135,7 +135,6 @@
 		display: flex;
 		justify-content: center;
 		padding: 0.5rem 1rem;
-		padding-top: 8rem; /* Space between InputBar and toolbar (~128px) */
 	}
 
 	.toolbar-bar.sidebar-mode {
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
index 4baab1cbc..513d14703 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@@ -293,19 +293,19 @@
 	.date-strip-wrapper {
 		position: fixed;
 		bottom: calc(140px + env(safe-area-inset-bottom, 0px)); /* Above InputBar + PillNav */
-		left: 0;
-		right: 0;
+		left: 1rem;
+		right: 1rem;
 		z-index: 48;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
+		align-items: stretch;
 		pointer-events: none;
 		transition: bottom 0.2s ease;
 	}
 
 	/* When toolbar is expanded, push DateStrip up */
 	.date-strip-wrapper.toolbar-expanded {
-		bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Extra 60px for toolbar */
+		bottom: calc(220px + env(safe-area-inset-bottom, 0px)); /* Extra space for toolbar */
 	}
 
 	/* When PillNav is in sidebar mode, no PillNav at bottom - just InputBar */
@@ -314,7 +314,7 @@
 	}
 
 	.date-strip-wrapper.sidebar-mode.toolbar-expanded {
-		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(150px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.today-button {
@@ -366,13 +366,12 @@
 		flex-direction: column;
 		background: var(--color-surface, #ffffff);
 		border-radius: 16px;
-		margin: 0 1rem;
-		padding: 0.5rem 1.5rem;
+		margin: 0;
+		padding: 0.5rem 0;
 		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
 		border: 1px solid var(--color-border, #e5e7eb);
 		pointer-events: auto;
-		max-width: calc(100vw - 2rem);
-		min-width: 420px;
+		width: 100%;
 		overflow: hidden;
 	}
 
@@ -411,7 +410,7 @@
 		scrollbar-width: none;
 		-ms-overflow-style: none;
 		scroll-behavior: auto;
-		padding: 1.25rem 0.25rem 0.25rem;
+		padding: 1.25rem 1rem 0.25rem;
 		margin-top: -1rem;
 	}
 
@@ -513,9 +512,15 @@
 
 	/* Responsive */
 	@media (max-width: 640px) {
+		.date-strip-wrapper {
+			left: 0.5rem;
+			right: 0.5rem;
+		}
+
 		.date-strip-container {
-			margin: 0 0.5rem;
-			padding: 0.375rem;
+			margin: 0;
+			padding: 0.375rem 0;
+			width: 100%;
 		}
 
 		.month-label {
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index 8bcf75eba..6c415b945 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -413,7 +413,7 @@
 			bottomOffset={isSidebarMode
 				? '0px'
 				: showCalendarToolbar && !isToolbarCollapsed
-					? '130px'
+					? '150px'
 					: '70px'}
 		/>
 	</div>