From d86501e4e68552ce8fdbf7fd10841463018972c9 Mon Sep 17 00:00:00 2001
From: Joakim <joakim@jnss.me>
Date: Sun, 15 Feb 2026 14:08:41 +0100
Subject: [PATCH] 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       | 3 ++-
 opal-web/src/lib/components/InputBar.svelte     | 2 +-
 opal-web/src/lib/components/ReportPicker.svelte | 5 ++---
 opal-web/src/lib/components/TaskList.svelte     | 3 ++-
 opal-web/src/routes/+layout.svelte              | 9 +++++++--
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/opal-web/src/lib/components/Header.svelte b/opal-web/src/lib/components/Header.svelte
index ecbfac7..709dab9 100644
--- a/opal-web/src/lib/components/Header.svelte
+++ b/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);
diff --git a/opal-web/src/lib/components/InputBar.svelte b/opal-web/src/lib/components/InputBar.svelte
index e7e74ff..6face1f 100644
--- a/opal-web/src/lib/components/InputBar.svelte
+++ b/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);
diff --git a/opal-web/src/lib/components/ReportPicker.svelte b/opal-web/src/lib/components/ReportPicker.svelte
index 79fea9c..9d7f6e6 100644
--- a/opal-web/src/lib/components/ReportPicker.svelte
+++ b/opal-web/src/lib/components/ReportPicker.svelte
@@ -83,9 +83,8 @@
 <style>
 	.report-picker {
 		position: fixed;
-		top: 48px;
-		left: var(--spacing-md);
-		right: auto;
+		position-anchor: --report-btn;
+		position-area: bottom span-right;
 		margin: 0;
 		padding: var(--spacing-sm);
 		background-color: var(--bg-primary);
diff --git a/opal-web/src/lib/components/TaskList.svelte b/opal-web/src/lib/components/TaskList.svelte
index 30c9cf4..a140f36 100644
--- a/opal-web/src/lib/components/TaskList.svelte
+++ b/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 {
diff --git a/opal-web/src/routes/+layout.svelte b/opal-web/src/routes/+layout.svelte
index 0e6e9eb..a847ca0 100644
--- a/opal-web/src/routes/+layout.svelte
+++ b/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>