till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-15 12:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

style(calendar): align FAB with InputBar height and position

Browse source 
- 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>
This commit is contained in:
Till-JS 2025-12-13 13:50:42 +01:00
parent 11da7d22a7
commit 7d1666496b
4 changed files with 16 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

24
apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte
View file

@ -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;
}

2
apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
View file

@ -1022,7 +1022,7 @@
font-size: 0.75rem;
color: hsl(var(--color-muted-foreground));
position: relative;
top: -0.5em;
top: 0.25em;
}
.time-gutter {

2
apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
View file

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

2
apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
View file

@ -1250,7 +1250,7 @@
font-size: 0.75rem;
color: hsl(var(--color-muted-foreground));
position: relative;
top: -0.5em;
top: 0.25em;
}
.days-container {