EasyCorp / EasyCorp/EasyAdminBundle
Mobile sidebar backdrop is never cleaned up on viewport resize — whole desktop layout stays blurred
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
- Open any EasyAdmin backend at a viewport <992px.
- Open the sidebar via the hamburger (#navigation-toggler).
- Resize the window to ≥992px (e.g. rotate a tablet, un-snap a window, drag wider).
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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