From 351b6555b74c274b3512bb250d0ca91b6e10e918 Mon Sep 17 00:00:00 2001
From: ZDDC <caseywitt@proton.me>
Date: Sun, 10 May 2026 14:09:23 -0500
Subject: [PATCH] fix(shared): .header-left/.header-right belong in the shared
 chrome rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five tools (browse, transmittal, landing, form, tables) were rendering
their headers as vertically-stacked blocks — the .app-header flex
container correctly laid out its left/right groups, but those groups
themselves had no display:flex rule, so their children (logo, title,
build label, action button) defaulted to block-level stacking.

Three tools (archive, mdedit, classifier) hid the bug because they
each carried their own copy of the .header-left/.header-right flex
rule in tool-local CSS. Same intent, slightly different gap values:

  archive:    left gap 0.75rem, right gap 0.5rem
  mdedit:     both 0.75rem
  classifier: both 0.5rem

Promote the rule to shared/base.css alongside .app-header (where the
class is used in every template anyway): left 0.75rem, right 0.5rem
(matching archive — the layout the user pointed at as the reference).
Delete the three local duplicates.

Now all eight tools use the same header chrome contract: logo + title
group + primary action laid out horizontally with consistent gaps,
icon buttons grouped tighter on the right.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 archive/css/layout.css    | 12 ------------
 classifier/css/layout.css |  7 -------
 mdedit/css/base.css       |  8 --------
 shared/base.css           | 17 +++++++++++++++++
 4 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/archive/css/layout.css b/archive/css/layout.css
index 3ed4949..bc9ee69 100644
--- a/archive/css/layout.css
+++ b/archive/css/layout.css
@@ -5,18 +5,6 @@
     padding: 0.5rem 1rem;
 }
 
-.header-left {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
-.header-right {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-}
-
 .preview-toggle-label {
     display: flex;
     align-items: center;
diff --git a/classifier/css/layout.css b/classifier/css/layout.css
index c59dbb5..946ac78 100644
--- a/classifier/css/layout.css
+++ b/classifier/css/layout.css
@@ -81,13 +81,6 @@
     padding: 0.5rem 1rem;
 }
 
-.header-left,
-.header-right {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
-
 .header-divider {
     color: var(--border);
     margin: 0 0.25rem;
diff --git a/mdedit/css/base.css b/mdedit/css/base.css
index d1cdd9b..1fb1b75 100644
--- a/mdedit/css/base.css
+++ b/mdedit/css/base.css
@@ -221,14 +221,6 @@
     font-style: italic;
 }
 
-/* ── App header layout ────────────────────────────────────────────────────── */
-.header-left,
-.header-right {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-}
-
 /* ── Tailwind class overrides: use CSS tokens instead of hardcoded colours ── */
 /* bg-white / bg-gray-100 are used on the pane backgrounds in template.html.  */
 /* Override them here so they follow the design-token system (light + dark).   */
diff --git a/shared/base.css b/shared/base.css
index e2baba5..a09d7c8 100644
--- a/shared/base.css
+++ b/shared/base.css
@@ -275,6 +275,23 @@ a:hover {
     flex-shrink: 0;
 }
 
+/* Left and right groups inside .app-header. Both flex-row so their
+   children (logo, title, action button, theme icon, etc.) lay out
+   horizontally rather than stacking. Left side gets a slightly
+   larger gap because it carries the title group and an action
+   button; right side is just icon buttons. */
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
 /* Tool name inside the header */
 .app-header__title {
     font-size: 17px;