Summary
In the Default Admin theme, with the core Navigation module's sidebar collapsed to icon-only mode, the logo and the first-level navigation icons don't line up, and the icons overflow the right edge of the rail.
Steps to reproduce
- Install a site with the
standardorminimalprofile on 12.0.0-alpha1. - Enable the
navigationmodule (stable as of 11.3.0) and setdefault_adminas the admin theme. - Visit any
/adminpage with the sidebar collapsed (default state). - Compare the logo (top-left) against the icons below it, and inspect the right edge of any icon button with devtools.
Actual behaviour
- The logo renders as a non-square 32×40px box instead of 32×32/40×40 — visibly squashed.
- The first-level nav icon buttons are 40px wide, but the rail's usable content width is only 32px, so they overflow the rail's right edge by ~8px (visible when highlighting the flex/grid boxes in devtools).
- The logo and the icons end up with different horizontal centers.
Expected behaviour
Logo and nav icons share the same box size and sit on the same horizontal center, same as in Claro — which doesn't have this problem.
| Buggy (4rem) | Expected (4.5rem, core default) | |
|---|---|---|
| Rail width (collapsed) | 65px | 73px |
| Logo box | 32×40px (squashed) | 40×40px (square) |
| Icon-button box | 40×40px, ~8px overflow past rail edge | 40×40px, fits |
| Optical center, logo vs. icon | 32px vs 36px (different) | 36px vs 36px (same) |
(Screenshots attached below — before.png / after.png.)
Root cause
default_admin overrides --admin-toolbar-sidebar-width to 4rem (64px) for the collapsed rail, in core/themes/default_admin/css/components/navigation.pcss.css. Core's own body rule (core/modules/navigation/css/components/admin-toolbar.pcss.css) already sets this variable to 4.5rem (72px) collapsed / 16.5rem expanded, and core's icon-button box model is built for that 4.5rem figure:
16px content padding + 10px button padding + 20px icon (both sides) = 72px = 4.5rem
At 4rem the usable width is only 32px (64 − 2×16), 8px short of what a 40px icon button needs:
- the logo (
.admin-toolbar__logo), laid out with flexbox andjustify-content: space-betweenin.admin-toolbar__header, gets non-uniformly flex-shrunk (32×40 instead of 32×32/40×40); - the nav icon buttons, laid out in
.toolbar-block__list(CSS grid), don't shrink and overflow the rail instead.
Claro never overrides --admin-toolbar-sidebar-width, which is why it renders correctly at core's own 4.5rem/16.5rem.
Origin of the 4rem value
It's inherited from the Gin contrib theme. Gin's own core-Navigation integration layer (gin.libraries.yml → core_navigation library → dist/css/layout/core_navigation.css) sets the same --admin-toolbar-sidebar-width: 4rem on body.gin--core-navigation, without any compensating change to core's .toolbar-button padding (still 10px there too) or to .admin-toolbar__logo's box size — Gin itself carries the same latent bug in that integration mode. A likely symptom of the same "not enough room in the 4rem rail" root cause is already reported there: #3573855 "Scrollbar overlapping core navigation module in collapsed mode".
When Gin's design was consolidated into Default Admin theme (commit e9065446, "Part 2 of Consolidate, refactor, remove and untangle Claro's CSS from Default Admin theme", June 2026), the 4rem value and the gin--navigation class name were carried over verbatim, without re-deriving the padding math for core's .toolbar-button/ .admin-toolbar__logo. It's still present on main as of the most recent commit touching this file (35bbc4e3, "Remove remaining Gin and Claro implementation names from Default Admin theme", today) — which only renamed the class to admin--navigation and left the value alone.
This was already noticed, but not diagnosed, as a bullet point in #3592061 ("List of visual differences between Gin & Admin theme"): "The logo is always the same size, except for backend collapsed, there it's smaller than the other 3" (comment #11, jurgenhaas).
Proposed fix
Drop the --admin-toolbar-sidebar-width override in default_admin's navigation.pcss.css/.css entirely and inherit core's default (4.5rem collapsed / 16.5rem expanded), exactly like Claro does. Net deletion of two rule blocks, no new CSS needed — patch attached, MR to follow.
As a side effect, this also removes a secondary annoyance: since icon padding no longer differs between collapsed and expanded states, toggling the sidebar no longer resizes the icon/logo boxes mid-transition.
| Comment | File | Size | Author |
|---|---|---|---|
| after.png | 29.52 KB | maks oleksyuk | |
| before.png | 27.47 KB | maks oleksyuk |
Issue fork drupal-3620907
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
maks oleksyuk commented