feat(calendar): improve FAB positioning on mobile and subtle close styling

- Add hasFabRight prop to InputBar for mobile FAB spacing
- InputBar leaves space for FAB on screens under 900px
- Change active FAB style to subtle muted colors instead of bright blue
- Support dark mode for active FAB state

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-13 14:04:51 +01:00
parent faa94129c5
commit cc37db8072
3 changed files with 18 additions and 3 deletions

View file

@ -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 {

View file

@ -415,6 +415,7 @@
: showCalendarToolbar && !isToolbarCollapsed
? '140px'
: '70px'}
hasFabRight={showCalendarToolbar && !isSidebarMode}
/>
</div>
</SplitPaneContainer>

View file

@ -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 @@
<div
class="quick-input-bar"
class:has-fab-right={hasFabRight}
style="--primary-color: {primaryColor}; --bottom-offset: {bottomOffset}"
>
<!-- Results Panel (above input) -->
@ -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,