From 4d1db202c062e12e4a78de77538f67655d02f832 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 12 Dec 2025 21:55:07 +0100
Subject: [PATCH] feat(calendar): convert toolbar to collapsed FAB next to
 InputBar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CalendarToolbar is now collapsed by default as a FAB button
- FAB positioned right next to the QuickInputBar
- Toolbar panel opens above on click with smooth slide animation
- Reduced bottom padding since toolbar no longer takes full width
- DateStrip position adjusted to be closer to InputBar
- Updated localStorage logic (default is now collapsed)

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../lib/components/calendar/DateStrip.svelte  |  4 ++--
 .../lib/components/calendar/DayView.svelte    |  3 ---
 .../lib/components/calendar/MonthView.svelte  |  6 ++---
 .../apps/web/src/routes/(app)/+layout.svelte  | 24 +++++++------------
 .../apps/web/src/routes/(app)/+page.svelte    |  5 ----
 .../src/components/SplitPaneContainer.svelte  |  4 ++--
 6 files changed, 16 insertions(+), 30 deletions(-)

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 43b4acf42..818e6487c 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte
@@ -287,7 +287,7 @@
 <style>
 	.date-strip-wrapper {
 		position: fixed;
-		bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Above InputBar */
+		bottom: calc(140px + env(safe-area-inset-bottom, 0px)); /* Above InputBar + PillNav */
 		left: 0;
 		right: 0;
 		z-index: 48;
@@ -298,7 +298,7 @@
 		transition: bottom 0.3s ease;
 	}
 
-	/* When PillNav is in sidebar mode, no PillNav/Toolbar at bottom - just InputBar */
+	/* When PillNav is in sidebar mode, no PillNav at bottom - just InputBar */
 	.date-strip-wrapper.sidebar-mode {
 		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
 	}
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
index abae9e796..cd257dfb2 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
@@ -915,8 +915,6 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		height: 100%;
-		overflow: hidden;
 	}
 
 	.all-day-section {
@@ -1010,7 +1008,6 @@
 		display: flex;
 		width: 100%;
 		max-width: 800px;
-		overflow-y: auto;
 	}
 
 	.time-column {
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
index 19d0c844c..14d5abc4e 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MonthView.svelte
@@ -338,8 +338,6 @@
 	.month-view {
 		display: flex;
 		flex-direction: column;
-		height: 100%;
-		overflow: hidden;
 	}
 
 	.weekday-headers {
@@ -347,6 +345,9 @@
 		grid-template-columns: repeat(var(--column-count, 7), 1fr);
 		border-bottom: 1px solid hsl(var(--color-border));
 		background: hsl(var(--color-background));
+		position: sticky;
+		top: 0;
+		z-index: 10;
 	}
 
 	.weekday-header {
@@ -362,7 +363,6 @@
 		flex: 1;
 		display: flex;
 		flex-direction: column;
-		overflow-y: auto;
 	}
 
 	.week-row {
diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index bd34a6d46..f8872cdfd 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -313,11 +313,11 @@
 			collapsedStore.set(true);
 		}
 
-		// Initialize toolbar collapsed state from localStorage
+		// Initialize toolbar collapsed state from localStorage (default is now collapsed)
 		const savedToolbarCollapsed = localStorage.getItem('calendar-toolbar-collapsed');
-		if (savedToolbarCollapsed === 'true') {
-			isToolbarCollapsed = true;
-			toolbarCollapsedStore.set(true);
+		if (savedToolbarCollapsed === 'false') {
+			isToolbarCollapsed = false;
+			toolbarCollapsedStore.set(false);
 		}
 	});
 </script>
@@ -423,10 +423,6 @@
 	}
 
 	.main-content {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-height: 0;
 		transition: all 300ms ease;
 		position: relative;
 		/* Space for QuickInputBar at bottom */
@@ -437,12 +433,12 @@
 		padding-top: 70px;
 	}
 
-	/* Extra padding when DateStrip + Toolbar are at bottom */
+	/* Extra padding when DateStrip is at bottom (toolbar is now a FAB) */
 	.main-content.floating-mode.has-toolbar {
 		padding-top: 0;
 		padding-bottom: calc(
-			280px + env(safe-area-inset-bottom)
-		); /* DateStrip + Toolbar + PillNav + QuickInputBar */
+			220px + env(safe-area-inset-bottom)
+		); /* DateStrip + PillNav + QuickInputBar */
 	}
 
 	@media (max-width: 768px) {
@@ -452,8 +448,8 @@
 		}
 		.main-content.has-toolbar {
 			padding-bottom: calc(
-				250px + env(safe-area-inset-bottom)
-			); /* DateStrip + Toolbar + BottomNav + QuickInputBar */
+				200px + env(safe-area-inset-bottom)
+			); /* DateStrip + BottomNav + QuickInputBar */
 		}
 		.main-content.floating-mode.has-toolbar {
 			padding-top: 70px;
@@ -465,8 +461,6 @@
 	}
 
 	.content-wrapper {
-		flex: 1;
-		min-height: 0;
 		max-width: 100%;
 		margin-left: auto;
 		margin-right: auto;
diff --git a/apps/calendar/apps/web/src/routes/(app)/+page.svelte b/apps/calendar/apps/web/src/routes/(app)/+page.svelte
index 29a62bb74..e464e1a2d 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+page.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+page.svelte
@@ -204,7 +204,6 @@
 		display: flex;
 		gap: 1.5rem;
 		width: 100%;
-		height: 100%;
 		position: relative;
 	}
 
@@ -309,12 +308,10 @@
 		display: flex;
 		flex-direction: column;
 		min-width: 0;
-		min-height: 0;
 		background: hsl(var(--color-surface));
 		border-radius: var(--radius-lg);
 		border: 1px solid hsl(var(--color-border));
 		transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
-		overflow: hidden;
 	}
 
 	.calendar-main.expanded {
@@ -324,8 +321,6 @@
 
 	.calendar-content {
 		flex: 1;
-		min-height: 0;
-		overflow: hidden;
 	}
 
 	@media (max-width: 1024px) {
diff --git a/packages/shared-splitscreen/src/components/SplitPaneContainer.svelte b/packages/shared-splitscreen/src/components/SplitPaneContainer.svelte
index f0ddaf89d..9020a2d61 100644
--- a/packages/shared-splitscreen/src/components/SplitPaneContainer.svelte
+++ b/packages/shared-splitscreen/src/components/SplitPaneContainer.svelte
@@ -81,7 +81,7 @@
 		width: 100%;
 		height: 100%;
 		min-height: 0;
-		overflow: hidden;
+		overflow: clip;
 		position: relative;
 	}
 
@@ -99,7 +99,7 @@
 		height: 100%;
 		min-width: 0;
 		min-height: 0;
-		overflow: hidden;
+		overflow: clip;
 	}
 
 	.side-panel {