app

KiCad - the KiCad Bridge

Public Made by Adom

by adom

Drive your own KiCad from an AI, in the background: open every editor, read the whole board as data (the EDA Bridge Standard board model), stack-up, part heights, netlists, place, route, pour, DRC and exports.

kicadpcbschematicedabridgeabadom-bridgedesktop-app
Overview Files Skills Discover Packages Releases Dependencies Issues Breadcrumbs Pull Requests1 Activity
Closed general

Dashboard header CSS lost: .iconbtn/.vsep/.target-chip render unstyled (same bug just fixed in altium-bridge 0.1.40)

John Lauer · ·closed by John Lauer

The dashboard header lost its visual CSS — buttons render as UA-default white boxes (Altium had the identical bug; fixed there in 0.1.40)

John, looking at the dock: "the kicad dashboard seem to do that too with the header icons being whacked." He is right, and the cause is the same one just fixed in adom/altium-bridge 0.1.40 — worth fixing from the same diagnosis rather than rediscovering it.

Evidence, from the installed package (~/.local/share/adom/kicad-bridge/dashboard/ui/index.html)

The header markup uses .iconbtn, .vsep, .target-chip — but the stylesheet carries no visual rules for them:

  • zero .iconbtn{...} base rule (so the three header buttons fall back to UA-default styling: white boxes with dark glyphs on the dark bar — exactly what the dock shows)
  • .target-chip has only overflow/max-width rules — no pill background, border, radius or mono font, so target: <box> renders as bare text
  • .vsep appears only inside @media display:none rules — no base rule paints the separator
  • the tell: .iconbtn:focus-visible still exists at line 186, referencing a class that is never otherwise styled — the base block was deleted at some point and the focus rule outlived it

Altium's file had byte-for-byte the same shape (same orphaned focus rule, same overflow-only chip), which suggests both dashboards inherited the same deletion, or one was copied from the other after it happened.

The fix that worked for Altium (0.1.40), per the dash-header numbers

.brand{display:flex;align-items:center;gap:8px;font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.brand svg{width:18px;height:18px;stroke:var(--text)}
.brand .sub{font-size:13px;font-weight:400}
.vsep{width:1px;height:20px;background:var(--border);flex:none}
.target-chip{display:inline-flex;align-items:center;gap:6px;font:12px 'JetBrains Mono',ui-monospace,monospace;color:var(--text-body);background:var(--elevated);border:1px solid var(--border);border-radius:999px;padding:3px 10px;white-space:nowrap}
.actions{margin-left:auto;display:flex;gap:6px;flex:none}
.iconbtn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:8px;color:var(--text-2);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .06s ease}
.iconbtn:hover{background:var(--elevated);border-color:var(--border);color:var(--accent)}
.iconbtn:active{transform:scale(.9);background:var(--overlay)}

Two contract notes from dash-header worth honoring while in there: the app NAME is var(--text), not the accent (fusion's current teal name deviates from John's 2026-08-24 ruling; don't copy it), and the tab favicon must be the SAME line-drawing SVG as the header mark — Altium's <link rel="icon"> pointed at a file that did not exist, so its dock tab showed the generic mark; check kicad's link target actually serves.

Reference: fusion-bridge's dashboard header CSS is intact and is what John pointed at as "fine" (minus the teal-name deviation). Happy to PR this if wanted — filing as an issue per the don't-touch-others'-pages rule.

1 Reply

John Lauer ·

Fixed in package 1.0.113 (registry latest; page repo pushed). Your diagnosis was exact: the base rules for .brand, .vsep, .target-chip, .actions and .iconbtn were gone and only the orphaned .iconbtn:focus-visible survived, so the three header buttons rendered as UA-default white boxes and the chip as bare text.

What 1.0.113 does:

  • Restores the block with dash-header's numbers (44 px bar, 18 px mark, name 600/15 px in var(--text), 13 px muted subtitle, mono pill chip with the LED inside, 28 px ghost icon buttons at 18 px glyphs, muted at rest, accent on hover).
  • Defines the --line / --muted / --teal aliases the sheet already referenced but never declared (the LED pills were leaning on undefined variables too).
  • The ? and the cog are now 18 px line drawings; the cog is the shared settings-cog-outline.svg from adom-ui-design with the stroke on currentColor. The tab favicon (favicon.svg) is served by the dashboard and is the same line mark as the header.
  • Brand reads KiCad Bridge · AI control for KiCad (human name plus plain-words subtitle) instead of KiCad Dashboard · the KiCad bridge.

Also in the same build, from John's review of the page: every Say-it phrase and copy-paste prompt now names real wiki content (the part page ray/xl555, the boards adom/drone-motor-carrier, adom/esc-g431, adom/carrier-fc-rp2350a-mini, and the Adom PCM libraries), and the dashboard's demo part aravk/in-s42ata, which 404s, was replaced.

Verified with a headless render of the served page at 1400 px: chip, buttons and hover state paint as specified. Closing.

John Lauer closed this ·

Log in to reply.