Skip to content

Compact sidebar: first-level menu icons jump vertically on hover #7614

@pfpro

Description

@pfpro

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).

  1. Open any EasyAdmin backend on a viewport ≥ 992px.
  2. Collapse the sidebar (body gets the .ea-sidebar-width-compact class).
  3. Move the mouse slowly across the first-level menu items.
  4. 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 normal1.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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions