fix(header): stop the nav midline chip rule from collapsing the quick-login buttons

The top-nav guest popover rendered its quick-login buttons as 29px circles
with zero gap: github, gitee and qq were touching. The user-card widget, which
uses the same .social_loginbar markup, was fine at 32px with 10px gaps.

header-userbox.css carries an AKSRT-specific rule, absent from the reference
theme, that gives every .toggle-radius inside .navbar-form a 29px midline
circle:

  .navbar-top .navbar-form .toggle-radius { flex: 0 0 29px; margin: 0; }

It exists for the account-row .badg chips, the theme toggle and the language
toggle. The popover social buttons are .toggle-radius too and also sit inside
.navbar-form, so they were caught by it. Two independent mechanisms broke the
geometry: flex-basis outranks width in a flex container, so flex: 0 0 29px beat
the .social_loginbar .social-login-item width: 32px !important; and the rule
(0,3,0) specificity outranked the (0,2,0) margin: 3px 5px.

Exempt the social buttons with :not(). The chips, the theme toggle and the
language toggle still match, and the popover buttons fall back to the
.social_loginbar geometry ported 1:1 from the reference.

Verified on the live site by measuring computed styles in headless Edge: the
popover buttons go from 29px/0px margins/0px gap to 32px/5px margins/10px gap,
the user-card widget is unchanged, and the account-row chips keep 29px (theme
toggle) and 36px (.badg). Rebuilt the public bundle so the exemption survives
the build, and contract-locked the selector plus the bundle copy.

Verification: node --test across widget-system, navigation, admin,
asset-ledger, dev, front-submit and visual (615 tests).
This commit is contained in:
kate522 committed 2026-10-17 17:56:56 +08:00
1 parent 0bee2c605e
commit 5641c40958
4 files changed
+32 -3

No files matched your search

@@ -180,6 +180,23 @@ test('guest account member VIP and publish contracts share reference header DOM'
assert.match(userboxCss, /\.aksrt-header-userbox\s*>\s*\.mt6\.em09\s*>\s*\.but\.block\s*\{[^}]*display:\s*block;[^}]*box-sizing:\s*border-box;[^}]*width:\s*100%;/s);
});
test('the top-nav midline chip rule leaves the popover social buttons alone', () => {
const userboxCss = read('assets/css/frontend/header-userbox.css');
const publicCss = read('assets/css/build/public.css');
// The account-row chips, the theme toggle and the language toggle all want a
// 29px midline circle. The popover's quick-login buttons are .toggle-radius
// too and also live inside .navbar-form, but they must keep the
// .social_loginbar geometry from main.css. flex-basis outranks width in a
// flex container and the bare rule is (0,3,0) against (0,2,0), so an
// unscoped selector collapses the buttons to 29px and zeroes their margins.
assert.match(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)\s*\{[^}]*flex:\s*0 0 29px;[^}]*margin:\s*0;/s);
assert.doesNotMatch(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius\s*\{/);
// header-userbox.css is also folded into the public bundle, so the exemption
// has to survive the build.
assert.match(publicCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)/);
});
test('route and feature modules do not restyle the legacy top-nav chips', () => {
// Route and feature modules may not restyle the legacy .but colour modifiers
// without an enclosing scope. The top-nav chips ride the legacy geometry