EasyCorp / EasyCorp/EasyAdminBundle

Mobile sidebar backdrop is never cleaned up on viewport resize — whole desktop layout stays blurred

Open Beginner friendly
#7,726 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
PHP
Stars
4.3k
Forks
1.1k
Avg merge
8d 2h
Merged PRs (30d)
11

Description

Describe the bug

#createNavigationToggler() (in assets/js/app.js) opens the mobile sidebar by adding ea-mobile-sidebar-visible to and appending a

. Both are only removed when the backdrop is clicked or the toggler is pressed again — never when the viewport changes.

When the browser window is resized from a mobile width (<992px, sidebar open) to ≥992px:

  • the .modal-backdrop stays in the DOM. Since v5.2 it has backdrop-filter: blur(4px) (easyadmin-theme/modals.css), and at ≥992px the sidebar becomes position: static (base.css), so the leftover fixed backdrop (z-index 1050) paints above the entire layout — everything, including the sidebar and content, is blurred until the user happens to click somewhere.
  • body.ea-mobile-sidebar-visible also stays, so the body.ea-mobile-sidebar-visible .sidebar rule keeps applying its mobile drop shadow to the static desktop sidebar.

Before 5.2 the leftover backdrop was a subtle dark overlay, so this mostly went unnoticed; the new blur makes it very visible.

To Reproduce

  1. Open any EasyAdmin backend at a viewport <992px.
  2. Open the sidebar via the hamburger (#navigation-toggler).
  3. Resize the window to ≥992px (e.g. rotate a tablet, un-snap a window, drag wider).
  4. The whole layout is blurred; inspecting shows the stale .modal-backdrop and the ea-mobile-sidebar-visible class.

Expected behavior

Growing past the desktop breakpoint closes the mobile sidebar state: backdrop removed, body class removed.

Possible fix

Watch the breakpoint inside #createNavigationToggler() and reuse the existing cleanup, e.g.:

window.matchMedia('(min-width: 992px)').addEventListener('change', (e) => {
    if (e.matches && document.body.classList.contains(cssClassName)) {
        document.body.classList.remove(cssClassName);
        if (modalBackdrop) {
            document.body.removeChild(modalBackdrop);
            modalBackdrop = null;
        }
    }
});

(EasyAdmin 5.2.0, Symfony 8.1, Bootstrap 5.3.8)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in assets/js/app.js at #createNavigationToggler() and review the existing sidebar and backdrop cleanup paths. Check the breakpoint-related rules in base.css and easyadmin-theme/modals.css while reproducing the resize from below 992px to at least 992px. Done means the backdrop and ea-mobile-sidebar-visible body class are removed after resizing to the desktop breakpoint.

Written by the indexing model from the issue text.

Assessment

Tech stack
bootstrap, javascript
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
76/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.