tighten views

frontend/src/lib/components/Card.svelte

@@ -3,21 +3,23 @@
 		cols = 1,
 		title,
 		accent,
+		scrollX = false,
 		children
-	}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; children?: any } = $props();
+	}: { cols?: 1 | 2 | 3 | 4 | 5 | 6; title?: string; accent?: string; scrollX?: boolean; children?: any } = $props();
 </script>
 
 <div
 	class="card"
 	style="grid-column: span {cols}; {accent ? `--card-accent: ${accent}` : ''}"
 	class:has-accent={!!accent}
+	class:scroll-x={scrollX}
 >
 	{#if title}
 		<div class="card-header">
 			<span class="card-title">{title}</span>
 		</div>
 	{/if}
-	<div class="card-body">
+	<div class="card-body" class:scroll-x-body={scrollX}>
 		{@render children?.()}
 	</div>
 </div>
@@ -29,6 +31,9 @@
 		border-radius: 10px;
 		overflow: hidden;
 	}
+	.card.scroll-x {
+		overflow: visible;
+	}
 	.card.has-accent {
 		border-top: 3px solid var(--card-accent, #6366f1);
 	}
@@ -45,4 +50,8 @@
 	.card-body {
 		padding: 1rem;
 	}
+	.card-body.scroll-x-body {
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+	}
 </style>

frontend/src/lib/components/ViewHeader.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
-	let { title, subtitle, tabs, weeknav, sort }: {
+	let { title, subtitle, hero = false, tabs, weeknav, sort }: {
 		title: string;
 		subtitle?: string;
+		hero?: boolean;
 		tabs?: { items: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
 		weeknav?: { current: string; onPrev: () => void; onNext: () => void };
 		sort?: { options: { label: string; value: string }[]; active: string; onchange: (v: string) => void };
 	} = $props();
 </script>
 
-<div class="view-header">
+<div class="view-header" class:hero>
 	<div class="view-title-group">
 		<h1 class="view-title">{title}</h1>
 		{#if subtitle}<p class="view-subtitle">{subtitle}</p>{/if}
@@ -68,4 +69,24 @@
 		padding: 0.3rem 0.6rem; border: 1px solid #d1d5db; border-radius: 5px;
 		font-size: 0.85rem; background: #fff;
 	}
+
+	/* ── Hero lead (child-dashboard style) ── */
+	.view-header.hero {
+		background: linear-gradient(135deg, #6366f1, #8b5cf6 55%, #a855f7);
+		border-radius: 16px;
+		padding: 1.25rem 1.5rem;
+		color: #fff;
+		box-shadow: 0 10px 30px rgba(99, 102, 241, 0.35);
+	}
+	.view-header.hero .view-title-group { margin-bottom: 0.25rem; }
+	.view-header.hero .view-title { color: #fff; }
+	.view-header.hero .view-subtitle { color: rgba(255, 255, 255, 0.85); }
+	.view-header.hero .view-tools { margin-top: 0.75rem; }
+	.view-header.hero .tab-bar { background: rgba(255, 255, 255, 0.16); }
+	.view-header.hero .tab-btn { color: rgba(255, 255, 255, 0.9); }
+	.view-header.hero .tab-btn:hover { color: #fff; }
+	.view-header.hero .tab-btn.active { background: #fff; color: #4338ca; }
+	.view-header.hero .nav-btn { background: rgba(255, 255, 255, 0.92); border-color: transparent; color: #4338ca; }
+	.view-header.hero .nav-label { color: #fff; }
+	.view-header.hero .sort-select { background: rgba(255, 255, 255, 0.92); color: #1e1b4b; }
 </style>