Describe the bug
In the compact (collapsed) sidebar on desktop, first-level menu icons shift vertically by 1–3 px when the user hovers over a menu item. The icons visibly "jump" because the hover state shows the previously hidden label, which expands the flex container height.
To Reproduce
EasyAdminBundle version: v5.0.8 (also reproduces against main since the relevant CSS in assets/css/easyadmin-theme/menu.css is unchanged).
- Open any EasyAdmin backend on a viewport
≥ 992px.
- Collapse the sidebar (body gets the
.ea-sidebar-width-compact class).
- Move the mouse slowly across the first-level menu items.
- Observe each icon's vertical position relative to a fixed reference (e.g. its row baseline) — it shifts on hover and snaps back on hover-out.
Root cause
In assets/css/easyadmin-theme/menu.css, the compact-mode rules:
body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents {
align-items: center;
display: flex;
padding: 7px 5px 7px 0;
}
body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-icon {
block-size: 21px;
}
body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label {
display: none; /* hidden in non-hover state */
}
body.ea-sidebar-width-compact #main-menu .menu .menu-item:hover .menu-item-label {
display: block; /* appears on hover */
}
.menu-item-contents has no fixed height. With align-items: center, the container height equals the tallest visible flex child:
- Non-hover: only the 21 px icon is laid out → container =
21 + 14 = 35 px.
- Hover: label becomes visible; its line-height (browser default
normal ≈ 1.2 × 14px ≈ 17–24px) often exceeds 21 px → flex line grows → container grows to ~36–38 px.
Because of align-items: center, the icon moves vertically by half the height delta on every hover transition.
Proposed fix
Pin the contents block-size and align the label's line-height to the icon's block-size — scoped to the compact-on-desktop selector that already owns this layout:
@media (min-width: 992px) {
body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-contents {
block-size: 35px; /* padding-y (2 × 7) + icon block-size (21) */
}
body.ea-sidebar-width-compact #main-menu .menu .menu-item .menu-item-label {
line-height: 21px; /* matches icon block-size */
}
}
Only the compact-on-desktop branch is affected; mobile (< 992 px) and the expanded desktop sidebar are untouched.
Additional context
Confirmed and verified via a project-level CSS override (Symfony 8 + EA v5.0.8, Bootstrap 5.3.8). After applying both rules the vertical jump is fully gone in current Chrome, Firefox and Safari (light + dark mode); no regression observed in the surrounding hover styles (background, box-shadow, submenu fly-out).
Happy to open a PR if the proposed fix looks acceptable.
Describe the bug
In the compact (collapsed) sidebar on desktop, first-level menu icons shift vertically by 1–3 px when the user hovers over a menu item. The icons visibly "jump" because the hover state shows the previously hidden label, which expands the flex container height.
To Reproduce
EasyAdminBundle version: v5.0.8 (also reproduces against
mainsince the relevant CSS inassets/css/easyadmin-theme/menu.cssis unchanged).≥ 992px..ea-sidebar-width-compactclass).Root cause
In
assets/css/easyadmin-theme/menu.css, the compact-mode rules:.menu-item-contentshas no fixed height. Withalign-items: center, the container height equals the tallest visible flex child:21 + 14= 35 px.normal≈1.2 × 14px ≈ 17–24px) often exceeds 21 px → flex line grows → container grows to ~36–38 px.Because of
align-items: center, the icon moves vertically by half the height delta on every hover transition.Proposed fix
Pin the contents block-size and align the label's line-height to the icon's block-size — scoped to the compact-on-desktop selector that already owns this layout:
Only the compact-on-desktop branch is affected; mobile (
< 992 px) and the expanded desktop sidebar are untouched.Additional context
Confirmed and verified via a project-level CSS override (Symfony 8 + EA v5.0.8, Bootstrap 5.3.8). After applying both rules the vertical jump is fully gone in current Chrome, Firefox and Safari (light + dark mode); no regression observed in the surrounding hover styles (background, box-shadow, submenu fly-out).
Happy to open a PR if the proposed fix looks acceptable.