From 7d1666496b844d3406104fba417eb49b9e0af0b7 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Sat, 13 Dec 2025 13:50:42 +0100
Subject: [PATCH] style(calendar): align FAB with InputBar height and position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FAB now has same height as InputBar (54px instead of 44px)
- Adjusted vertical position to align perfectly with InputBar
- Increased icon size to 1.5rem for better visibility

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../calendar/CalendarToolbar.svelte           | 24 ++++++++++---------
 .../lib/components/calendar/DayView.svelte    |  2 +-
 .../components/calendar/MultiDayView.svelte   |  2 +-
 .../lib/components/calendar/WeekView.svelte   |  2 +-
 4 files changed, 16 insertions(+), 14 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 8e7ab8584..805f08127 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
@@ -93,11 +93,13 @@
 {/if}
 
 <style>
-	/* FAB Container - positioned next to InputBar */
+	/* FAB Container - positioned next to InputBar (aligned with input-container) */
 	.fab-container {
 		position: fixed;
-		bottom: calc(70px + env(safe-area-inset-bottom, 0px));
-		right: calc(50% - 350px - 60px); /* Right of InputBar (max-width 700px / 2 + gap) */
+		bottom: calc(
+			70px + 9px + env(safe-area-inset-bottom, 0px)
+		); /* 70px offset + 9px to align with input-container */
+		right: calc(50% - 350px - 70px); /* Right of InputBar (max-width 700px / 2 + gap) */
 		z-index: 91; /* Above InputBar (90) */
 		pointer-events: none;
 		transition: bottom 0.2s ease;
@@ -105,15 +107,15 @@
 
 	/* When expanded, move FAB up with InputBar */
 	.fab-container.expanded {
-		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(130px + 9px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.fab-container.sidebar-mode {
-		bottom: calc(0px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(0px + 9px + env(safe-area-inset-bottom, 0px));
 	}
 
 	.fab-container.sidebar-mode.expanded {
-		bottom: calc(60px + env(safe-area-inset-bottom, 0px));
+		bottom: calc(60px + 9px + env(safe-area-inset-bottom, 0px));
 	}
 
 	/* Responsive positioning */
@@ -177,13 +179,13 @@
 		background: transparent;
 	}
 
-	/* FAB Button */
+	/* FAB Button - same height as InputBar (54px) */
 	.toolbar-fab {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2.75rem;
-		height: 2.75rem;
+		width: 54px;
+		height: 54px;
 		cursor: pointer;
 		border: none;
 		transition: all 0.2s ease;
@@ -205,8 +207,8 @@
 	}
 
 	.fab-icon {
-		width: 1.25rem;
-		height: 1.25rem;
+		width: 1.5rem;
+		height: 1.5rem;
 		color: hsl(var(--color-muted-foreground));
 		transition: color 0.2s ease;
 	}
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 cd257dfb2..fa5875c95 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
@@ -1022,7 +1022,7 @@
 		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		position: relative;
-		top: -0.5em;
+		top: 0.25em;
 	}
 
 	.time-gutter {
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
index b28339807..ce5246266 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
@@ -1253,7 +1253,7 @@
 		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		position: relative;
-		top: -0.5em;
+		top: 0.25em;
 	}
 
 	.compact .time-label,
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
index acee36ff2..9636ff1dc 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
@@ -1250,7 +1250,7 @@
 		font-size: 0.75rem;
 		color: hsl(var(--color-muted-foreground));
 		position: relative;
-		top: -0.5em;
+		top: 0.25em;
 	}
 
 	.days-container {