VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(shared): .header-left/.header-right belong in the shared chrome rule

Browse source 
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>
This commit is contained in:
ZDDC 2026-05-10 14:09:23 -05:00
parent 4cd39998aa
commit 351b6555b7
4 changed files with 17 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
archive/css/layout.css
View file

@ -5,18 +5,6 @@
padding: 0.5rem 1rem; 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 { .preview-toggle-label {
display: flex; display: flex;
align-items: center; align-items: center;

7
classifier/css/layout.css
View file

@ -81,13 +81,6 @@
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
.header-left,
.header-right {
display: flex;
align-items: center;
gap: 0.5rem;
}
.header-divider { .header-divider {
color: var(--border); color: var(--border);
margin: 0 0.25rem; margin: 0 0.25rem;

8
mdedit/css/base.css
View file

@ -221,14 +221,6 @@
font-style: italic; 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 ── */ /* ── Tailwind class overrides: use CSS tokens instead of hardcoded colours ── */
/* bg-white / bg-gray-100 are used on the pane backgrounds in template.html. */ /* 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). */ /* Override them here so they follow the design-token system (light + dark). */

17
shared/base.css
View file

@ -275,6 +275,23 @@ a:hover {
flex-shrink: 0; 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 */ /* Tool name inside the header */
.app-header__title { .app-header__title {
font-size: 17px; font-size: 17px;