From b86af489883e0dcc12b5a702348538bce3060f78 Mon Sep 17 00:00:00 2001 From: CST-100 <42722690+CST-100@users.noreply.github.com> Date: Wed, 10 Jun 2026 21:58:37 -0700 Subject: [PATCH] Bound and center content app-wide: --content-max 1400px MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Content width becomes a global budget: .main is bounded to --content-max and centered, so wide viewports split slack symmetrically instead of pooling it right of left-anchored pages (issue tickets being the worst case). Chrome stays full-bleed; the breadcrumb bar aligns its text to the centered content edge. ok.panel(max_width=...) panels now self-center, and the survey pass fixed the stragglers that bounded by hand without centering (settings index, project wizard, docs, styleguide). The exec-tabs strip is content, not chrome — comment updated to match its behavior under the bounded main. Also converts the scrap modal on the OPAL detail page to a real fixed overlay: it referenced .modal-overlay/.modal-content classes that exist nowhere, so it rendered in document flow at the bottom of the page — pre-existing, surfaced by the width survey. Co-Authored-By: Claude Fable 5 --- src/opal/web/static/css/main.css | 16 +++++++++++----- src/opal/web/templates/docs.html | 2 +- .../web/templates/inventory/opal_detail.html | 6 +++--- src/opal/web/templates/opalkit/_macros.html | 2 +- .../web/templates/opalkit/styleguide/index.html | 2 +- src/opal/web/templates/project/wizard.html | 2 +- src/opal/web/templates/settings/index.html | 2 +- 7 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/opal/web/static/css/main.css b/src/opal/web/static/css/main.css index 49b2374..1105a75 100644 --- a/src/opal/web/static/css/main.css +++ b/src/opal/web/static/css/main.css @@ -49,6 +49,7 @@ --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Spacing */ + --content-max: 1400px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px; @@ -250,7 +251,8 @@ select option { /* Breadcrumbs */ .breadcrumbs { - padding: var(--space-xs) var(--space-md); + /* Full-bleed bar, text aligned to the centered content edge */ + padding: var(--space-xs) max(var(--space-md), calc((100% - var(--content-max)) / 2 + var(--space-md))); background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); font-family: var(--font-mono); @@ -268,9 +270,12 @@ select option { margin: 0; } -/* Main */ +/* Main — bounded, centered content; chrome stays full-bleed */ .main { flex: 1; + width: 100%; + max-width: var(--content-max); + margin-inline: auto; padding: var(--space-md); } @@ -1376,9 +1381,10 @@ textarea { } /* Execution Tabs — mirrors .nav-dropdown-btn so the chrome reads as one family. - On the exec-detail page the strip breaks out of .main padding so it runs - edge-to-edge; the .main padding-top is also zeroed so the strip hugs the - breadcrumbs above. */ + On the exec-detail page the strip cancels .main's padding so it spans the + bounded content column (the strip is content, not page chrome); .main's + padding-top is also zeroed so the strip sits directly under the + breadcrumb bar. */ .exec-tabs { display: flex; gap: var(--space-xs); diff --git a/src/opal/web/templates/docs.html b/src/opal/web/templates/docs.html index 9aa2e01..7428a6a 100644 --- a/src/opal/web/templates/docs.html +++ b/src/opal/web/templates/docs.html @@ -7,7 +7,7 @@ {% endblock %} {% block content %} -
+
OPAL DOCUMENTATION - v{{ opal_version or '0.2.0' }}
diff --git a/src/opal/web/templates/inventory/opal_detail.html b/src/opal/web/templates/inventory/opal_detail.html index 52fb575..cf6a59d 100644 --- a/src/opal/web/templates/inventory/opal_detail.html +++ b/src/opal/web/templates/inventory/opal_detail.html @@ -333,8 +333,8 @@

ASSEMBLIES CONTAINING THIS COMPONENT -