fix(ui): admin-toolbar no longer overlaps fixed header

5f9d9dbd7415213a5092d5a51f5c1f9f90c955a0 · 2026-05-30 09:24:22 -0700 · Steve Abrams

Steve 2026-05-30 'fix overlapping ui' — screenshot showed the dark
admin-toolbar on /design/:id pages clipping into the hamburger button
in the top-right corner of the cream header.

Root cause: .site-header is position:fixed and renders at 81px tall
(44px brand line-height + 18px+18px padding + 1px border), but
main { padding-top } was only 73px — so the admin-toolbar (inside
main, position:sticky) started ~8px UNDER the fixed header. The
hamburger button visually clipped against the admin-toolbar's top.

Two-line fix:
  1. main { padding-top: 73px } -> 81px in public/css/site.css
  2. #admin-toolbar inline style: position:sticky;top:0 -> top:81px
     in server.js so it pins BELOW the header on scroll, not under it

Verified: prod https://wallco.ai/design/53999 returns 200, served CSS
shows padding-top:81px. Backups created on prod as
server.js.bak-ui-<ts> + public/css/site.css.bak-ui-<ts>.

Files touched

M public/css/site.css
M server.js

Diff

commit 5f9d9dbd7415213a5092d5a51f5c1f9f90c955a0
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat May 30 09:24:22 2026 -0700

    fix(ui): admin-toolbar no longer overlaps fixed header
    
    Steve 2026-05-30 'fix overlapping ui' — screenshot showed the dark
    admin-toolbar on /design/:id pages clipping into the hamburger button
    in the top-right corner of the cream header.
    
    Root cause: .site-header is position:fixed and renders at 81px tall
    (44px brand line-height + 18px+18px padding + 1px border), but
    main { padding-top } was only 73px — so the admin-toolbar (inside
    main, position:sticky) started ~8px UNDER the fixed header. The
    hamburger button visually clipped against the admin-toolbar's top.
    
    Two-line fix:
      1. main { padding-top: 73px } -> 81px in public/css/site.css
      2. #admin-toolbar inline style: position:sticky;top:0 -> top:81px
         in server.js so it pins BELOW the header on scroll, not under it
    
    Verified: prod https://wallco.ai/design/53999 returns 200, served CSS
    shows padding-top:81px. Backups created on prod as
    server.js.bak-ui-<ts> + public/css/site.css.bak-ui-<ts>.
---
 public/css/site.css | 2 +-
 server.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/css/site.css b/public/css/site.css
index 00320bb..771d3cc 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -205,7 +205,7 @@ img { max-width: 100%; display: block; }
 [data-theme="dark"]  .sun-icon  { display: none; }
 
 /* ── MAIN OFFSET for fixed header */
-main { padding-top: 73px; }
+main { padding-top: 81px; } /* matches .site-header actual height (44px brand + 18+18 padding + 1px border). Was 73px which caused the admin-toolbar to overlap with the fixed header by ~8px — Steve 2026-05-30 'fix overlapping ui' screenshot. */
 
 /* ── HERO */
 .hero-section {
diff --git a/server.js b/server.js
index ffd847d..46ba167 100644
--- a/server.js
+++ b/server.js
@@ -11867,7 +11867,7 @@ ${_isAdmin ? `
      prominently on the front-end instead of buried in the Distribute drawer.
      Sticky so it stays in reach while scrolling. Admin-gated, never shown
      to anonymous buyers. -->
-<div id="admin-toolbar" style="position:sticky;top:0;z-index:80;display:flex;gap:10px;align-items:center;padding:10px 14px;background:#1a1816;border-bottom:1px solid #3a2f1c;color:#f0e6cc;font:13px var(--sans,system-ui);box-shadow:0 2px 6px rgba(0,0,0,.18)">
+<div id="admin-toolbar" style="position:sticky;top:81px;z-index:80;display:flex;gap:10px;align-items:center;padding:10px 14px;background:#1a1816;border-bottom:1px solid #3a2f1c;color:#f0e6cc;font:13px var(--sans,system-ui);box-shadow:0 2px 6px rgba(0,0,0,.18)">
   <span style="font:600 10px ui-sans-serif,system-ui;letter-spacing:.18em;text-transform:uppercase;color:#c98a00">Admin</span>
   <code style="font:11px ui-monospace,Menlo,monospace;color:#a08b6a">#${design.id}</code>
   <span id="atb-state" style="font:11px ui-sans-serif,system-ui;color:${design.is_published ? '#7ad48a' : '#d8a060'};letter-spacing:.04em">${design.is_published ? '● live' : '○ unpublished'}</span>

← 1b9059d backfill-rooms-cron: indent=2 + byte-size guard (95%) to sto · back to Wallco Ai · fix: backfill-wallco-rooms uses sudo -u postgres psql on Lin fb0b8e2 →