EasyCorp / EasyCorp/EasyAdminBundle

Suggest removing the backdrop dim/blur applied when the mobile sidebar is open

Open
#7,809 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

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: blur and/or the translucent background, leaving the backdrop only as a transparent click-catcher (or dropping it entirely once click-outside-close is handled on document).

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.