EasyCorp / EasyCorp/EasyAdminBundle
Suggest removing the backdrop dim/blur applied when the mobile sidebar is open
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 4.3k
- Forks
- 1.1k
- Avg merge
- 8d 2h
- Merged PRs (30d)
- 11
Description
Description
When the mobile sidebar is opened, a .modal-backdrop overlay is appended that dims and blurs the page behind it:
.modal-backdrop{
--bs-backdrop-bg:transparent; --bs-backdrop-opacity:1;
background-color:color-mix(in srgb,var(--black) 10%,transparent);
backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
For a drawer that slides over the content (rather than a modal dialog), the dim/blur is visually unnecessary and can look heavy on long admin pages.
Expected
Consider not dimming/blurring the page behind the open mobile sidebar, or make it opt-in. Closing the drawer should not require the overlay to be visibly rendered.
Suggestions:
- Remove the
backdrop-filter: blurand/or the translucent background, leaving the backdrop only as a transparent click-catcher (or dropping it entirely once click-outside-close is handled ondocument).
Workaround we use today (not viable upstream)
We remove the backdrop with a MutationObserver in our own JS and close the sidebar via a document click handler instead.
Environment
EasyAdmin v5.5.1 (@media (max-width:991px) responsive header / mobile sidebar).
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 by locating the mobile sidebar and .modal-backdrop styles used under @media (max-width:991px) in EasyAdmin v5.5.1, then reproduce the open-drawer behavior on a long admin page. Done means the drawer remains usable, the page is not visibly dimmed or blurred, and click-outside closing still works if the transparent backdrop is retained.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 64/100