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/routes/+layout.svelte

@@ -27,8 +27,13 @@
 <style>
 	.app {
 		height: 100dvh;
-		display: flex;
-		flex-direction: column;
+		display: grid;
+		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>