From 0c79dd2c5dffde5deb22fb40fae09b972555d60c Mon Sep 17 00:00:00 2001
From: Bernhard Jackiewicz <bj@techport.io>
Date: Sun, 4 Oct 2026 14:53:48 +0200
Subject: [PATCH] fix(ui): keep the Architecture subtab row in one place in
 every subtab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Back, Forward and the subtabs share one row since A1, but the row jumped
when switching between Overview, Routes and Hotspots and the two system
views: System structure and Behavior set the view's frame to 16 px instead
of 28 and 32 and gave the tabs their own padding and gap. "← Back" stood at
x 32, y 98 in the first three and at x 16, y 86 in the other two.

The system views now use the frame and the row of the other subtabs. The
Back button stands at x 32, y 98.3 in all five.

Signed-off-by: Bernhard Jackiewicz <bj@techport.io>
---
 .../src/architecture/system-architecture.css  |  5 +--
 .../src/architecture/tab-row-position.test.ts | 32 +++++++++++++++++++
 2 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 graph-ui/src/architecture/tab-row-position.test.ts

diff --git a/graph-ui/src/architecture/system-architecture.css b/graph-ui/src/architecture/system-architecture.css
index 5fc416ac9..60a272095 100644
--- a/graph-ui/src/architecture/system-architecture.css
+++ b/graph-ui/src/architecture/system-architecture.css
@@ -1,12 +1,9 @@
 .system-architecture { min-width: 0; }
-.atlas-architecture[data-system-view] { padding: 16px; }
+/* Review of K40: the view's frame and the row with Back, Forward and the subtabs are those of the other subtabs; with values of their own the row jumped by 16 px. */
 .atlas-architecture[data-system-view] .atlas-arch-heading { align-items: center; margin-bottom: 12px; }
 .atlas-architecture[data-system-view] .atlas-arch-heading h1 { font-size: 24px; line-height: 1.2; margin: 0 0 5px; }
 .atlas-architecture[data-system-view] .atlas-arch-heading p { margin: 0; font-size: 12px; }
 .atlas-architecture[data-system-view] .atlas-arch-project { display: none; }
-.atlas-architecture[data-system-view] .atlas-arch-tabrow { margin-bottom: 10px; }
-.atlas-architecture[data-system-view] .atlas-arch-tabs { gap: 5px; }
-.atlas-architecture[data-system-view] .atlas-arch-tab { padding: 7px 10px; }
 .atlas-architecture[data-system-view] .atlas-arch-toolbar { margin-bottom: 12px; gap: 8px; }
 .system-toolbar, .system-reading-status, .system-map-caption { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: space-between; }
 .system-toolbar { margin-bottom: 10px; gap: 8px; }
diff --git a/graph-ui/src/architecture/tab-row-position.test.ts b/graph-ui/src/architecture/tab-row-position.test.ts
new file mode 100644
index 000000000..0125801a5
--- /dev/null
+++ b/graph-ui/src/architecture/tab-row-position.test.ts
@@ -0,0 +1,32 @@
+/*
+ * Review of K40: since A1 Back, Forward and the subtabs share one row, but the
+ * row jumped between Overview, Routes and Hotspots on one side and System
+ * structure and Behavior on the other: those two set the view's frame to 16 px
+ * instead of 28 and 32 and made the tabs narrower. "← Back" stood at x 32, y 98
+ * in the first three and at x 16, y 86 in the other two. No rule for the
+ * system views may set the view's frame or the row differently, so the row
+ * stands alike in every subtab.
+ */
+import { readFileSync } from 'node:fs';
+import { expect, it } from 'vitest';
+
+const SHEETS = ['architecture.css', 'system-architecture.css', 'behavior-journey.css', 'spatial-architecture.css', 'container-map.css', 'architecture-scene.css', 'source-evidence.css']
+    .map((name) => ({ name, css: readFileSync(new URL(`./${name}`, import.meta.url), 'utf8').replace(/\/\*[\s\S]*?\*\//g, '') }));
+const ROW = /\.atlas-arch-(tabrow|tabs|tab|history|recent)\b/;
+const BOX = /^(padding|margin)(-|$)/;
+
+it('K40: System structure and Behavior keep the subtab row where the other subtabs have it', () => {
+    const offending: string[] = [];
+    for (const { name, css } of SHEETS) {
+        for (const match of css.matchAll(/([^{}]+)\{([^}]*)\}/g)) {
+            for (const selector of match[1]!.split(',').map((item) => item.trim())) {
+                if (!selector.includes('[data-system-view')) continue;
+                const properties = match[2]!.split(';').map((part) => part.split(':')[0]!.trim()).filter(Boolean);
+                // The view's own frame, or anything about the row with the history buttons and the subtabs.
+                const frame = /^\.atlas-architecture\[data-system-view[^\]]*\]$/.test(selector) && properties.some((property) => BOX.test(property));
+                if (frame || ROW.test(selector)) offending.push(`${name}: ${selector} { ${properties.join(', ')} }`);
+            }
+        }
+    }
+    expect(offending).toEqual([]);
+});