fix(header): put the top-nav clusters on one horizontal line

The top-nav account row carried min-height: 50px on top of the 8px
margin-top that Bootstrap base .navbar-form rule keeps at >=768px (the
override only zeroes the horizontal margins). The 8px was counted twice,
so the row ran from 8px to 58px: its icon tiles landed 8px below the 25px
midline that the 50px menu row and the logo define, and the navbar grew
from 50px to 58px, which also broke the body.nav-fixed offset.

Drop the min-height so the row takes its natural 34px height from the
icon tiles, and give the theme/language group the same 34px cross-size so
its 29px toggle shares that midline instead of sitting 2.5px above it.
Measured against the reference theme, the navbar goes from 66px to
50.05px (reference 50.28px) and the logo, menu, publish chip, VIP chip,
theme toggle and account icons all centre on 25px.

The desktop navbar stays visible below 991px (only the menu folds into a
dropdown there), so the same fix applies at the mobile and tablet
breakpoints: the top bar drops from 68px to 52.05px.

Verified: node --test across tests/ (603 passing), and a stubbed navbar
render measured in a headless browser against the reference theme
stylesheet.
This commit is contained in:
2026-10-15 21:03:27 +08:00
parent 5810693e01
commit ee39024549
4 changed files with 44 additions and 9 deletions
+17 -4
View File
@@ -2714,14 +2714,21 @@ main.container,
* shell anchoring plus the account action-row geometry.
*/
/* The reference keeps the right cluster as three floated .navbar-form groups, so
* only the account row carries its own alignment context; the button groups
* inherit their geometry from .navbar-top .navbar-but .but and .navbar-form. */
/* The reference keeps the right cluster as three floated .navbar-form groups.
* Bootstrap's base .navbar-form rule carries margin-top: 8px and the >=768px
* override only zeroes the horizontal margins, so every right-cluster group
* starts 8px below the top of .navbar-collapse. The 50px menu row and the logo
* put the navbar midline at 25px, so a 34px cross-size lands a group's midline
* at 8 + 17 = 25px. The publish/VIP chips already reach that line through their
* own 0.4em margin stacked on the group's 8px; the account row reaches it from
* its 34px icon tiles, and the theme group needs the same cross-size because
* its 29px toggle is otherwise 2.5px high. Nothing here may restate a 50px
* min-height: it would double-count the 8px and push that group's content 8px
* below the line while inflating the navbar from 50px to 58px. */
.navbar-top .aksrt-navbar-account {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 50px;
margin: 0;
}
@@ -2780,6 +2787,12 @@ main.container,
vertical-align: middle;
}
/* Match the account row's 34px cross-size so the 29px toggle shares the 25px
* midline instead of sitting 2.5px above it. */
.navbar-top .navbar-form.flex.ac {
min-height: 34px;
}
.navbar-top .navbar-form .aksrt-navbar-language {
margin: 0;
}
+1 -1
View File
File diff suppressed because one or more lines are too long
+17 -4
View File
@@ -7,14 +7,21 @@
* shell anchoring plus the account action-row geometry.
*/
/* The reference keeps the right cluster as three floated .navbar-form groups, so
* only the account row carries its own alignment context; the button groups
* inherit their geometry from .navbar-top .navbar-but .but and .navbar-form. */
/* The reference keeps the right cluster as three floated .navbar-form groups.
* Bootstrap's base .navbar-form rule carries margin-top: 8px and the >=768px
* override only zeroes the horizontal margins, so every right-cluster group
* starts 8px below the top of .navbar-collapse. The 50px menu row and the logo
* put the navbar midline at 25px, so a 34px cross-size lands a group's midline
* at 8 + 17 = 25px. The publish/VIP chips already reach that line through their
* own 0.4em margin stacked on the group's 8px; the account row reaches it from
* its 34px icon tiles, and the theme group needs the same cross-size because
* its 29px toggle is otherwise 2.5px high. Nothing here may restate a 50px
* min-height: it would double-count the 8px and push that group's content 8px
* below the line while inflating the navbar from 50px to 58px. */
.navbar-top .aksrt-navbar-account {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 50px;
margin: 0;
}
@@ -73,6 +80,12 @@
vertical-align: middle;
}
/* Match the account row's 34px cross-size so the 29px toggle shares the 25px
* midline instead of sitting 2.5px above it. */
.navbar-top .navbar-form.flex.ac {
min-height: 34px;
}
.navbar-top .navbar-form .aksrt-navbar-language {
margin: 0;
}
@@ -356,6 +356,15 @@ test('desktop header actions share one row without generic button masks', () =>
assert.doesNotMatch(headerNavbar, /class="btn nav-search-btn main-search-btn"/)
assert.match(headerCss, /\.navbar-top \.aksrt-navbar-account\s*\{[^}]*display:\s*inline-flex;[^}]*align-items:\s*center;/s)
assert.match(headerCss, /\.navbar-top \.aksrt-nav-icon,[\s\S]*?background:\s*transparent !important;/)
// Bootstrap's base .navbar-form rule keeps margin-top: 8px at >=768px (the
// override only zeroes the horizontal margins), so every right-cluster group
// starts 8px below the top of .navbar-collapse. A 34px cross-size therefore
// puts each group's midline on the navbar's 25px line, where the 50px menu row
// and the logo already sit. A 50px min-height double-counts that 8px: the
// group's content drops 8px below the line and the navbar grows from 50px to
// 58px, which also breaks the body.nav-fixed offset.
assert.doesNotMatch(headerCss, /\.navbar-top \.aksrt-navbar-account\s*\{[^}]*min-height/s)
assert.match(headerCss, /\.navbar-top \.navbar-form\.flex\.ac\s*\{[^}]*min-height:\s*34px;/s)
// The publish and VIP chips ride the legacy .but geometry verbatim; nothing in
// the header module may restate their padding, margin, radius or icon size.
// Descendant, not child: the VIP chip lives inside the hover-show wrapper.