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

  1. Install a site with the standard or minimal profile on 12.0.0-alpha1.
  2. Enable the navigation module (stable as of 11.3.0) and set default_admin as the admin theme.
  3. Visit any /admin page with the sidebar collapsed (default state).
  4. 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 and justify-content: space-between in .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.ymlcore_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.

CommentFileSizeAuthor
after.png29.52 KBmaks oleksyuk
before.png27.47 KBmaks oleksyuk

Issue fork drupal-3620907

Command icon 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

maks oleksyuk created an issue. See original summary.

maks oleksyuk’s picture

Status: Active » Needs review