feat(web): use CSS grid-areas layout with anchor-positioned report picker

Replace flexbox layout with CSS grid using named grid-areas for responsive
content containment. Gutters collapse naturally on small screens via
min(--content-max-width, 100%). Anchor ReportPicker to its trigger button
using CSS anchor positioning instead of fixed viewport offsets.

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

opal-web/src/lib/components/Header.svelte

@@ -63,16 +63,17 @@
 
 <style>
 	.header {
+		grid-area: header;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding: var(--spacing-sm) var(--spacing-md);
 		background-color: var(--bg-primary);
 		border-bottom: 1px solid var(--border-color);
-		flex-shrink: 0;
 	}
 
 	.report-btn {
+		anchor-name: --report-btn;
 		display: inline-flex;
 		align-items: center;
 		gap: var(--spacing-xs);

opal-web/src/lib/components/InputBar.svelte

@@ -119,7 +119,7 @@
 
 <style>
 	.input-bar {
-		flex-shrink: 0;
+		grid-area: input;
 		padding: var(--spacing-sm) var(--spacing-md);
 		padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
 		background-color: var(--bg-primary);

opal-web/src/lib/components/ReportPicker.svelte

@@ -83,9 +83,8 @@
 <style>
 	.report-picker {
 		position: fixed;
-		top: 48px;
+		position-anchor: --report-btn;
-		left: var(--spacing-md);
+		position-area: bottom span-right;
-		right: auto;
 		margin: 0;
 		padding: var(--spacing-sm);
 		background-color: var(--bg-primary);

opal-web/src/lib/components/TaskList.svelte

@@ -57,10 +57,11 @@
 
 <style>
 	.task-list {
-		flex: 1;
+		grid-area: content;
 		overflow-y: auto;
 		-webkit-overflow-scrolling: touch;
 		background-color: var(--bg-primary);
+		min-height: 0;
 	}
 
 	.loading-container {

opal-web/src/routes/+layout.svelte

@@ -27,8 +27,13 @@
 <style>
 	.app {
 		height: 100dvh;
-		display: flex;
+		display: grid;
-		flex-direction: column;
+		grid-template-columns: 1fr min(var(--content-max-width), 100%) 1fr;
+		grid-template-rows: auto 1fr auto;
+		grid-template-areas:
+			". header ."
+			". content ."
+			". input .";
 		overflow: hidden;
 	}
 </style>