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 ef7444e83..5ff5d7412 100644 --- a/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte +++ b/apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte @@ -207,12 +207,15 @@ } .toolbar-fab.active { - background: #3b82f6; - border-color: #3b82f6; + background: rgba(0, 0, 0, 0.05); + } + + :global(.dark) .toolbar-fab.active { + background: rgba(255, 255, 255, 0.15); } .toolbar-fab.active .fab-icon { - color: white; + color: hsl(var(--color-muted-foreground)); } .fab-icon { diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte index 84d55a078..aea016b1d 100644 --- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte +++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte @@ -415,6 +415,7 @@ : showCalendarToolbar && !isToolbarCollapsed ? '140px' : '70px'} + hasFabRight={showCalendarToolbar && !isSidebarMode} /> diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte index 36a1da80d..62cf5d7d1 100644 --- a/packages/shared-ui/src/quick-input/InputBar.svelte +++ b/packages/shared-ui/src/quick-input/InputBar.svelte @@ -59,6 +59,8 @@ autoFocus?: boolean; /** Bottom offset from viewport bottom (default: '70px') */ bottomOffset?: string; + /** Whether to leave space for a FAB button on the right side on mobile (default: false) */ + hasFabRight?: boolean; } let { @@ -75,6 +77,7 @@ primaryColor = '#8b5cf6', autoFocus = true, bottomOffset = '70px', + hasFabRight = false, }: Props = $props(); let searchQuery = $state(''); @@ -244,6 +247,7 @@
@@ -428,6 +432,13 @@ transition: bottom 0.3s ease; } + /* Leave space for FAB on mobile */ + @media (max-width: 900px) { + .quick-input-bar.has-fab-right { + padding-right: calc(54px + 1rem + 0.75rem); /* FAB width + FAB right margin + gap */ + } + } + .input-container, .results-panel, .submit-btn,