From 61dcfc7a526ccc6ac910b823383034eb0e9989e2 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 28 Jul 2026 15:47:15 +0200
Subject: [PATCH] Fix dataflow canvas and side panel layout

---
 webui/scripts/test-dataflow-page-structure.mjs | 16 +++++++++++++++-
 webui/src/module.ts                            |  2 +-
 webui/src/styles/dataflow.css                  | 14 ++++++++++++--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/webui/scripts/test-dataflow-page-structure.mjs b/webui/scripts/test-dataflow-page-structure.mjs
index c47fe79..9756873 100644
--- a/webui/scripts/test-dataflow-page-structure.mjs
+++ b/webui/scripts/test-dataflow-page-structure.mjs
@@ -3,6 +3,7 @@ import { readFileSync } from "node:fs";
 const page = readFileSync(new URL("../src/features/dataflow/DataflowPage.tsx", import.meta.url), "utf8");
 const canvas = readFileSync(new URL("../src/features/dataflow/DataflowCanvas.tsx", import.meta.url), "utf8");
 const css = readFileSync(new URL("../src/styles/dataflow.css", import.meta.url), "utf8");
+const moduleEntry = readFileSync(new URL("../src/module.ts", import.meta.url), "utf8");
 
 const checks = [
   [page.includes("<DataflowCanvas"), "graph canvas"],
@@ -13,8 +14,21 @@ const checks = [
   [canvas.includes("application/x-govoplan-dataflow-node"), "palette drop handling"],
   [canvas.includes("isValidConnection"), "edge validation"],
   [canvas.includes("connectionRadius={32}"), "visible connection drop radius"],
+  [
+    moduleEntry.indexOf("@xyflow/react/dist/style.css") <
+      moduleEntry.indexOf("./styles/dataflow.css"),
+    "XyFlow base styles before GovOPlaN overrides"
+  ],
   [css.includes("height: calc(100vh - 115px)"), "full-height workspace"],
-  [css.includes(".dataflow-preview-table-wrap"), "bounded preview scrolling"]
+  [css.includes(".dataflow-preview-table-wrap"), "bounded preview scrolling"],
+  [
+    /\.dataflow-palette-items\s*\{[^}]*grid-auto-rows:\s*max-content;[^}]*overflow-y:\s*auto;/s.test(css),
+    "bounded palette scrolling"
+  ],
+  [
+    /\.dataflow-inspector-fields\s*\{[^}]*grid-auto-rows:\s*max-content;[^}]*overflow-y:\s*auto;/s.test(css),
+    "bounded inspector scrolling"
+  ]
 ];
 
 const missing = checks.filter(([present]) => !present).map(([, label]) => label);
diff --git a/webui/src/module.ts b/webui/src/module.ts
index ed8a81c..ff30677 100644
--- a/webui/src/module.ts
+++ b/webui/src/module.ts
@@ -1,7 +1,7 @@
 import { createElement, lazy } from "react";
 import type { PlatformWebModule } from "@govoplan/core-webui";
-import "./styles/dataflow.css";
 import "@xyflow/react/dist/style.css";
+import "./styles/dataflow.css";
 
 const DataflowPage = lazy(() => import("./features/dataflow/DataflowPage"));
 
diff --git a/webui/src/styles/dataflow.css b/webui/src/styles/dataflow.css
index 4b1a656..c8e5c9f 100644
--- a/webui/src/styles/dataflow.css
+++ b/webui/src/styles/dataflow.css
@@ -418,14 +418,20 @@
 
 .dataflow-palette-items {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   gap: 4px;
   height: calc(100% - 44px);
   padding: 8px;
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 }
 
 .dataflow-palette-group {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   gap: 2px;
 }
 
@@ -682,10 +688,14 @@
 
 .dataflow-inspector-fields {
   display: grid;
+  grid-auto-rows: max-content;
+  align-content: start;
   gap: 12px;
   height: calc(100% - 44px);
-  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   padding: 12px;
+  scrollbar-gutter: stable;
 }
 
 .dataflow-inspector-fields .form-field {