fix(ui): keep the Architecture subtab row in one place in every subtab

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>

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; }

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([]);
+});