feat(shared-ui): add QuickInputBar and PillToolbar components

- Add QuickInputBar component with natural language parsing, syntax
  highlighting, search, and quick-create functionality
- Add PillToolbar, PillToolbarButton, PillToolbarDivider components
  for app-specific toolbar controls
- Add PillTimeRangeSelector for hour range selection
- Add PillViewSwitcher for view mode switching with sliding indicator
- Integrate QuickInputBar into Calendar, Contacts, and Todo apps
- Add app-specific toolbars: CalendarToolbar, ContactsToolbar, TodoToolbar
- Add DateStrip component for Calendar date navigation
- Fix type exports: export QuickAction and CreatePreview from quick-input
  module, remove duplicate exports from deprecated command-bar

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/calendar/apps/web/src/lib/components/calendar/CalendarToolbar.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+	import { viewStore } from '$lib/stores/view.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import type { CalendarViewType } from '@calendar/shared';
+	import {
+		PillToolbar,
+		PillToolbarButton,
+		PillToolbarDivider,
+		PillTimeRangeSelector,
+		PillViewSwitcher,
+	} from '@manacore/shared-ui';
+
+	// View type labels
+	const viewLabels: Record<CalendarViewType, string> = {
+		day: 'Tag',
+		'5day': '5 Tage',
+		week: 'Woche',
+		'10day': '10 Tage',
+		'14day': '14 Tage',
+		month: 'Monat',
+		year: 'Jahr',
+		agenda: 'Agenda',
+	};
+
+	// Views to show in selector
+	const visibleViews: CalendarViewType[] = [
+		'day',
+		'5day',
+		'week',
+		'10day',
+		'14day',
+		'month',
+		'year',
+	];
+
+	// Convert to ViewOptions for PillViewSwitcher
+	const viewOptions = visibleViews.map((type) => ({
+		id: type,
+		label: viewLabels[type],
+		title: viewLabels[type],
+	}));
+
+	// Hours change handlers
+	function handleStartHourChange(hour: number) {
+		settingsStore.set('dayStartHour', hour);
+	}
+
+	function handleEndHourChange(hour: number) {
+		settingsStore.set('dayEndHour', hour);
+	}
+
+	function handleViewChange(type: string) {
+		viewStore.setViewType(type as CalendarViewType);
+	}
+</script>
+
+<PillToolbar position="bottom" bottomOffset="70px">
+	<!-- Today button -->
+	<PillToolbarButton onclick={() => viewStore.goToToday()} title="Zum heutigen Tag springen">
+		Heute
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Navigation -->
+	<PillToolbarButton onclick={() => viewStore.goToPrevious()} title="Zurück" iconOnly>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+		</svg>
+	</PillToolbarButton>
+	<PillToolbarButton onclick={() => viewStore.goToNext()} title="Weiter" iconOnly>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+		</svg>
+	</PillToolbarButton>
+
+	<PillToolbarDivider />
+
+	<!-- Weekdays filter -->
+	<PillToolbarButton
+		onclick={() => settingsStore.set('showOnlyWeekdays', !settingsStore.showOnlyWeekdays)}
+		active={settingsStore.showOnlyWeekdays}
+		title="Nur Wochentage anzeigen (Mo-Fr)"
+	>
+		Mo-Fr
+	</PillToolbarButton>
+
+	<!-- Hours filter -->
+	<PillToolbarButton
+		onclick={() => settingsStore.set('filterHoursEnabled', !settingsStore.filterHoursEnabled)}
+		active={settingsStore.filterHoursEnabled}
+		title="Stundenfilter ein/aus"
+		iconOnly
+	>
+		<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2"
+				d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+			/>
+		</svg>
+	</PillToolbarButton>
+
+	<!-- Time range selector -->
+	<PillTimeRangeSelector
+		startHour={settingsStore.dayStartHour}
+		endHour={settingsStore.dayEndHour}
+		onStartHourChange={handleStartHourChange}
+		onEndHourChange={handleEndHourChange}
+		direction="up"
+		embedded={true}
+	/>
+
+	<PillToolbarDivider />
+
+	<!-- View selector -->
+	<PillViewSwitcher
+		options={viewOptions}
+		value={viewStore.viewType}
+		onChange={handleViewChange}
+		primaryColor="#3b82f6"
+		embedded={true}
+	/>
+</PillToolbar>

apps/calendar/apps/web/src/lib/components/calendar/DateStrip.svelte

@@ -0,0 +1,438 @@
+<script lang="ts">
+	import { viewStore } from '$lib/stores/view.svelte';
+	import {
+		format,
+		isToday,
+		isSameDay,
+		addDays,
+		subDays,
+		startOfDay,
+		isWithinInterval,
+	} from 'date-fns';
+	import { de } from 'date-fns/locale';
+	import { onMount, tick } from 'svelte';
+
+	// Reactive view range - needed to trigger re-renders
+	let viewRange = $derived(viewStore.viewRange);
+	let currentDate = $derived(viewStore.currentDate);
+
+	// Check if a day is within the current view range
+	function isInViewRange(day: Date): boolean {
+		return isWithinInterval(day, { start: viewRange.start, end: viewRange.end });
+	}
+
+	// Check if day is the first in the view range
+	function isFirstInRange(day: Date): boolean {
+		return isSameDay(day, viewRange.start);
+	}
+
+	// Check if day is the last in the view range
+	function isLastInRange(day: Date): boolean {
+		return isSameDay(day, viewRange.end);
+	}
+
+	// How many days to load in each direction
+	const DAYS_BUFFER = 60;
+	const LOAD_THRESHOLD = 20; // Load more when within this many days of edge
+
+	// Generate initial days centered around current date
+	let startDate = $state(subDays(startOfDay(new Date()), DAYS_BUFFER));
+	let endDate = $state(addDays(startOfDay(new Date()), DAYS_BUFFER));
+
+	// Track if today is visible in the scroll view
+	let isTodayVisible = $state(true);
+
+	// Generate array of days
+	let days = $derived.by(() => {
+		const result: Date[] = [];
+		let current = startDate;
+		while (current <= endDate) {
+			result.push(current);
+			current = addDays(current, 1);
+		}
+		return result;
+	});
+
+	// Scroll container ref
+	let scrollContainer: HTMLDivElement;
+	let isLoadingMore = false;
+
+	// Scroll to selected date when it changes
+	$effect(() => {
+		if (scrollContainer && currentDate) {
+			scrollToDate(currentDate);
+		}
+	});
+
+	async function scrollToDate(date: Date) {
+		await tick();
+
+		// First ensure the date is in our range
+		const targetDate = startOfDay(date);
+		if (targetDate < startDate) {
+			startDate = subDays(targetDate, DAYS_BUFFER);
+			await tick();
+		} else if (targetDate > endDate) {
+			endDate = addDays(targetDate, DAYS_BUFFER);
+			await tick();
+		}
+
+		const dayElement = scrollContainer?.querySelector(
+			`[data-date="${format(date, 'yyyy-MM-dd')}"]`
+		);
+		if (dayElement) {
+			dayElement.scrollIntoView({
+				behavior: 'smooth',
+				inline: 'center',
+				block: 'nearest',
+			});
+		}
+	}
+
+	function handleDayClick(day: Date) {
+		viewStore.setDate(day);
+	}
+
+	function goToToday() {
+		const today = new Date();
+		viewStore.setDate(today);
+	}
+
+	async function loadMoreDays(direction: 'past' | 'future') {
+		if (isLoadingMore) return;
+		isLoadingMore = true;
+
+		if (direction === 'past') {
+			// Save scroll position relative to a reference element
+			const firstVisibleDay = scrollContainer?.querySelector('.day-item');
+			const scrollLeftBefore = scrollContainer?.scrollLeft || 0;
+
+			startDate = subDays(startDate, DAYS_BUFFER);
+			await tick();
+
+			// Restore scroll position
+			if (firstVisibleDay && scrollContainer) {
+				const newScrollLeft = scrollLeftBefore + DAYS_BUFFER * 54; // 54px is approximate day width (52px + gap)
+				scrollContainer.scrollLeft = newScrollLeft;
+			}
+		} else {
+			endDate = addDays(endDate, DAYS_BUFFER);
+		}
+
+		isLoadingMore = false;
+	}
+
+	function checkTodayVisibility() {
+		if (!scrollContainer) return;
+
+		const todayElement = scrollContainer.querySelector('.day-item.today');
+		if (!todayElement) {
+			isTodayVisible = false;
+			return;
+		}
+
+		const containerRect = scrollContainer.getBoundingClientRect();
+		const todayRect = todayElement.getBoundingClientRect();
+
+		// Check if today element is within the visible scroll area
+		isTodayVisible =
+			todayRect.left >= containerRect.left - 20 && todayRect.right <= containerRect.right + 20;
+	}
+
+	function handleScroll() {
+		if (!scrollContainer || isLoadingMore) return;
+
+		// Check if today is visible
+		checkTodayVisibility();
+
+		const { scrollLeft, scrollWidth, clientWidth } = scrollContainer;
+		const scrollRight = scrollWidth - scrollLeft - clientWidth;
+
+		// Calculate approximate day index from scroll position
+		const dayWidth = 54; // approximate (52px + gap)
+		const visibleDayIndex = Math.floor(scrollLeft / dayWidth);
+		const totalDays = days.length;
+
+		// Load more past days
+		if (visibleDayIndex < LOAD_THRESHOLD) {
+			loadMoreDays('past');
+		}
+
+		// Load more future days
+		if (totalDays - visibleDayIndex - Math.floor(clientWidth / dayWidth) < LOAD_THRESHOLD) {
+			loadMoreDays('future');
+		}
+	}
+
+	// Get month label for a date (shown at month boundaries)
+	function getMonthLabel(day: Date, index: number): string | null {
+		// Show month label on first day of month or first day in view
+		if (day.getDate() === 1 || index === 0) {
+			if (day.getMonth() === 0 && day.getDate() === 1) {
+				// Show year for January 1st
+				return format(day, 'MMM yyyy', { locale: de });
+			}
+			return format(day, 'MMM', { locale: de });
+		}
+		return null;
+	}
+
+	onMount(() => {
+		// Initial scroll to current date
+		scrollToDate(viewStore.currentDate);
+	});
+</script>
+
+<div class="date-strip-wrapper">
+	<!-- Floating Today button (only visible when today is scrolled out of view) -->
+	{#if !isTodayVisible}
+		<button class="today-btn-floating" onclick={goToToday} title="Zum heutigen Tag"> Heute </button>
+	{/if}
+
+	<div class="date-strip-container">
+		<!-- Scrollable days container -->
+		<div class="days-scroll" bind:this={scrollContainer} onscroll={handleScroll}>
+			{#each days as day, index}
+				{@const monthLabel = getMonthLabel(day, index)}
+				{@const dayIsToday = isToday(day)}
+				{@const dayIsSelected = isSameDay(day, currentDate)}
+				{@const dayIsWeekend = day.getDay() === 0 || day.getDay() === 6}
+				{@const dayIsFirstOfMonth = day.getDate() === 1}
+				{@const dayInRange = isWithinInterval(day, { start: viewRange.start, end: viewRange.end })}
+				{@const dayIsRangeStart = isSameDay(day, viewRange.start)}
+				{@const dayIsRangeEnd = isSameDay(day, viewRange.end)}
+				{#if monthLabel}
+					<div class="month-marker">
+						<span class="month-label">{monthLabel}</span>
+					</div>
+				{/if}
+				<button
+					class="day-item"
+					class:today={dayIsToday}
+					class:selected={dayIsSelected}
+					class:weekend={dayIsWeekend}
+					class:first-of-month={dayIsFirstOfMonth}
+					class:in-range={dayInRange}
+					class:range-start={dayIsRangeStart}
+					class:range-end={dayIsRangeEnd}
+					data-date={format(day, 'yyyy-MM-dd')}
+					onclick={() => handleDayClick(day)}
+				>
+					<span class="day-weekday">{format(day, 'EE', { locale: de })}</span>
+					<span class="day-number">{format(day, 'd')}</span>
+				</button>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.date-strip-wrapper {
+		position: fixed;
+		bottom: calc(130px + env(safe-area-inset-bottom, 0px));
+		left: 0;
+		right: 0;
+		z-index: 998;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		pointer-events: none;
+	}
+
+	.today-btn-floating {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 0.5rem 1rem;
+		background: var(--color-primary);
+		border: none;
+		border-radius: 9999px;
+		cursor: pointer;
+		color: var(--color-primary-foreground);
+		font-size: 0.8125rem;
+		font-weight: 600;
+		white-space: nowrap;
+		transition: all 0.2s ease;
+		pointer-events: auto;
+		margin-bottom: 0.5rem;
+		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		animation: fade-in 0.2s ease;
+	}
+
+	.today-btn-floating:hover {
+		background: color-mix(in srgb, var(--color-primary) 90%, transparent);
+		transform: scale(1.05);
+	}
+
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.date-strip-container {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		background: transparent;
+		width: 100%;
+		pointer-events: auto;
+	}
+
+	.days-scroll {
+		display: flex;
+		align-items: center;
+		gap: 0.125rem;
+		overflow-x: auto;
+		scrollbar-width: none;
+		-ms-overflow-style: none;
+		scroll-behavior: auto;
+		flex: 1;
+		padding: 0.25rem 0;
+	}
+
+	.days-scroll::-webkit-scrollbar {
+		display: none;
+	}
+
+	.month-marker {
+		display: flex;
+		align-items: center;
+		padding: 0 0.5rem;
+		flex-shrink: 0;
+	}
+
+	.month-label {
+		font-size: 0.6875rem;
+		font-weight: 700;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-primary);
+		white-space: nowrap;
+		padding: 0.25rem 0.5rem;
+		background: color-mix(in srgb, var(--color-primary) 10%, transparent);
+		border-radius: 4px;
+	}
+
+	.day-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		min-width: 52px;
+		height: 58px;
+		padding: 0.375rem;
+		background: transparent;
+		border: none;
+		border-radius: 10px;
+		cursor: pointer;
+		color: var(--color-foreground);
+		transition: all 0.15s ease;
+		flex-shrink: 0;
+	}
+
+	.day-item:hover {
+		background: var(--color-muted);
+		opacity: 0.7;
+	}
+
+	.day-item.weekend {
+		color: var(--color-muted-foreground);
+	}
+
+	/* Today - always highlighted with primary color */
+	.day-item.today {
+		background: var(--color-primary) !important;
+		color: var(--color-primary-foreground) !important;
+		border-radius: 10px !important;
+		font-weight: 700;
+	}
+
+	.day-item.today:hover {
+		opacity: 0.9;
+	}
+
+	.day-item.selected:not(.today) {
+		background: var(--color-muted);
+		color: var(--color-primary);
+		font-weight: 600;
+	}
+
+	/* View range highlighting */
+	.day-item.in-range:not(.today) {
+		background: var(--color-muted);
+		border-radius: 0;
+	}
+
+	.day-item.in-range.range-start:not(.today) {
+		border-radius: 10px 0 0 10px;
+	}
+
+	.day-item.in-range.range-end:not(.today) {
+		border-radius: 0 10px 10px 0;
+	}
+
+	.day-item.in-range.range-start.range-end:not(.today) {
+		border-radius: 10px;
+	}
+
+	.day-item.in-range:not(.today):not(.selected):hover {
+		background: var(--color-border);
+	}
+
+	.day-item.first-of-month:not(.today):not(.selected):not(.in-range) {
+		border-left: 2px solid var(--color-border);
+		border-radius: 0 8px 8px 0;
+		margin-left: 0.25rem;
+	}
+
+	.day-weekday {
+		font-size: 0.75rem;
+		font-weight: 500;
+		text-transform: uppercase;
+		letter-spacing: 0.025em;
+		opacity: 0.7;
+	}
+
+	.day-number {
+		font-size: 1.125rem;
+		font-weight: 600;
+		line-height: 1;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.date-strip-container {
+			padding: 0.5rem 0.5rem;
+		}
+
+		.today-btn-floating {
+			padding: 0.375rem 0.75rem;
+			font-size: 0.75rem;
+		}
+
+		.day-item {
+			min-width: 44px;
+			height: 52px;
+		}
+
+		.day-number {
+			font-size: 1rem;
+		}
+
+		.day-weekday {
+			font-size: 0.6875rem;
+		}
+
+		.month-label {
+			font-size: 0.625rem;
+			padding: 0.125rem 0.375rem;
+		}
+	}
+</style>

apps/calendar/apps/web/src/routes/(app)/+layout.svelte

@@ -3,11 +3,11 @@
 	import { page } from '$app/stores';
 	import { onMount } from 'svelte';
 	import { locale } from 'svelte-i18n';
-	import { PillNavigation, CommandBar } from '@manacore/shared-ui';
+	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
 	import type {
 		PillNavItem,
 		PillDropdownItem,
-		CommandBarItem,
+		QuickInputItem,
 		QuickAction,
 		CreatePreview,
 	} from '@manacore/shared-ui';
@@ -41,31 +41,28 @@
 		resolveEventIds,
 		formatParsedEventPreview,
 	} from '$lib/utils/event-parser';
+	import CalendarToolbar from '$lib/components/calendar/CalendarToolbar.svelte';
+	import DateStrip from '$lib/components/calendar/DateStrip.svelte';
 
 	// App switcher items
 	const appItems = getPillAppItems('calendar');
 
 	let { children } = $props();
 
-	// CommandBar state
-	let commandBarOpen = $state(false);
-
-	// CommandBar quick actions (no search for calendar yet)
-	const commandBarQuickActions: QuickAction[] = [
-		{ id: 'new', label: 'Neuen Termin erstellen', icon: 'plus', href: '/event/new', shortcut: 'N' },
+	// QuickInputBar quick actions
+	const quickActions: QuickAction[] = [
 		{
 			id: 'today',
-			label: 'Zu Heute springen',
+			label: 'Heute',
 			icon: 'calendar',
 			onclick: () => viewStore.goToToday(),
 		},
-		{ id: 'agenda', label: 'Agenda anzeigen', icon: 'list', href: '/agenda' },
-		{ id: 'tasks', label: 'Aufgaben anzeigen', icon: 'check-square', href: '/tasks' },
+		{ id: 'agenda', label: 'Agenda', icon: 'list', href: '/agenda' },
 		{ id: 'settings', label: 'Einstellungen', icon: 'settings', href: '/settings' },
 	];
 
-	// CommandBar search - search events
-	async function handleCommandBarSearch(query: string): Promise<CommandBarItem[]> {
+	// QuickInputBar search - search events
+	async function handleSearch(query: string): Promise<QuickInputItem[]> {
 		if (!query.trim()) return [];
 
 		const result = await searchEvents(query);
@@ -78,24 +75,24 @@
 		}));
 	}
 
-	function handleCommandBarSelect(item: CommandBarItem) {
+	function handleSelect(item: QuickInputItem) {
 		goto(`/event/${item.id}`);
 	}
 
-	// CommandBar Quick-Create handlers
-	function handleCommandBarParseCreate(query: string): CreatePreview | null {
+	// QuickInputBar Quick-Create handlers
+	function handleParseCreate(query: string): CreatePreview | null {
 		if (!query.trim()) return null;
 
 		const parsed = parseEventInput(query);
 		if (!parsed.title) return null;
 
 		return {
-			title: parsed.title,
+			title: `"${parsed.title}" erstellen`,
 			subtitle: formatParsedEventPreview(parsed),
 		};
 	}
 
-	async function handleCommandBarCreate(query: string): Promise<void> {
+	async function handleCreate(query: string): Promise<void> {
 		const parsed = parseEventInput(query);
 		if (!parsed.title) return;
 
@@ -137,6 +134,9 @@
 	// Use theme store's isDark directly
 	let isDark = $derived(theme.isDark);
 
+	// Show toolbar only on calendar main page
+	let showCalendarToolbar = $derived($page.url.pathname === '/');
+
 	// Get pinned themes from user settings (extended themes only)
 	let pinnedThemes = $derived<ThemeVariant[]>(
 		(userSettings.theme?.pinnedThemes || []).filter((t): t is ThemeVariant =>
@@ -204,13 +204,6 @@
 	function handleKeydown(event: KeyboardEvent) {
 		const target = event.target as HTMLElement;
 
-		// Cmd/Ctrl+K to open command bar (works even in inputs)
-		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
-			event.preventDefault();
-			commandBarOpen = true;
-			return;
-		}
-
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
 		}
@@ -307,7 +300,7 @@
 		onModeChange={handleModeChange}
 		{isCollapsed}
 		onCollapsedChange={handleCollapsedChange}
-		desktopPosition={userSettings.nav.desktopPosition}
+		desktopPosition="bottom"
 		showThemeToggle={true}
 		showThemeVariants={true}
 		{themeVariantItems}
@@ -330,10 +323,21 @@
 		allAppsHref="/apps"
 	/>
 
+	<!-- Date strip (only on main calendar page) -->
+	{#if showCalendarToolbar}
+		<DateStrip />
+	{/if}
+
+	<!-- Calendar toolbar (only on main calendar page) -->
+	{#if showCalendarToolbar}
+		<CalendarToolbar />
+	{/if}
+
 	<main
 		class="main-content bg-background"
 		class:sidebar-mode={isSidebarMode && !isCollapsed}
 		class:floating-mode={!isSidebarMode && !isCollapsed}
+		class:has-toolbar={showCalendarToolbar}
 	>
 		<div
 			class="content-wrapper"
@@ -343,20 +347,20 @@
 		</div>
 	</main>
 
-	<!-- Global Command Bar (Cmd/K) -->
-	<CommandBar
-		bind:open={commandBarOpen}
-		onClose={() => (commandBarOpen = false)}
-		onSearch={handleCommandBarSearch}
-		onSelect={handleCommandBarSelect}
-		quickActions={commandBarQuickActions}
-		placeholder="Termin suchen oder erstellen..."
+	<!-- Global Quick Input Bar -->
+	<QuickInputBar
+		onSearch={handleSearch}
+		onSelect={handleSelect}
+		{quickActions}
+		placeholder="Neuer Termin oder suchen..."
 		emptyText="Keine Termine gefunden"
 		searchingText="Suche..."
-		onCreate={handleCommandBarCreate}
-		onParseCreate={handleCommandBarParseCreate}
-		createText="Als Termin erstellen"
-		createShortcut="⌘↵"
+		onCreate={handleCreate}
+		onParseCreate={handleParseCreate}
+		createText="Erstellen"
+		appIcon="calendar"
+		primaryColor="#3b82f6"
+		autoFocus={false}
 	/>
 </div>
 
@@ -371,12 +375,37 @@
 		transition: all 300ms ease;
 		position: relative;
 		z-index: 0;
+		/* Space for QuickInputBar at bottom */
+		padding-bottom: calc(80px + env(safe-area-inset-bottom));
 	}
 
 	.main-content.floating-mode {
 		padding-top: 70px;
 	}
 
+	/* Extra padding when DateStrip + Toolbar are at bottom */
+	.main-content.floating-mode.has-toolbar {
+		padding-top: 0;
+		padding-bottom: calc(
+			280px + env(safe-area-inset-bottom)
+		); /* DateStrip + Toolbar + PillNav + QuickInputBar */
+	}
+
+	@media (max-width: 768px) {
+		/* On mobile, toolbars are at bottom, extra padding at bottom instead */
+		.main-content {
+			padding-bottom: calc(150px + env(safe-area-inset-bottom)); /* PillNav + QuickInputBar */
+		}
+		.main-content.has-toolbar {
+			padding-bottom: calc(
+				250px + env(safe-area-inset-bottom)
+			); /* DateStrip + Toolbar + BottomNav + QuickInputBar */
+		}
+		.main-content.floating-mode.has-toolbar {
+			padding-top: 70px;
+		}
+	}
+
 	.main-content.sidebar-mode {
 		padding-left: 180px;
 	}