Search input in the content header stays 300px wide; the rest of the row (~816px) is an unclickable dead zone

Open Beginner friendly
  • Is something wrong?
#7,875 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
1/5
Estimated time
Under an hour
Newbie friendliness
90/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, php, symfony
Domain
frontend

Research direction

Inspect assets/css/easyadmin-theme/content-search.css, especially the .content-top .content-search .content-search-label rules and the input.is-blank sizing. The issue identifies the cause and offers two CSS approaches; choose the one consistent with the intended header layout, then verify the search field fills .content-search and that clicking its remaining area focuses the input.

Written by the indexing model from the issue text.

Description

design
Environment
  • EasyAdminBundle 5.6.1 (Symfony 7.4, PHP 8.4)
  • Chrome 155, Linux, no custom application CSS
Steps to reproduce
  1. Open any CRUD index page (/admin/bookmarks, /admin/settings, ...).
  2. Look at the search input in the top-right of the content header.
  3. Widen the window to 1600px and click in the empty area to the right of the input.
Expected

The search input fills the width of its container .content-top .content-search, which spans the whole header row (its flex: 1).

Actual

The input is always exactly 300px, so a large part of the row looks like it belongs to the search field but is dead. Measured with getBoundingClientRect():

viewport .content-search container input dead zone
1600 1137px 300px 816px
1400 937px 300px 616px
1280 817px 300px 496px
1100 637px 300px 316px
1024 561px 300px 240px
900 853px 300px 535px
768 721px 300px 403px
480 433px 300px 115px

Clicking that area focuses <body>, not the input — the click is simply ignored.

Cause

assets/css/easyadmin-theme/content-search.css:

@media (min-width: 992px) {
    .content-top .content-search .content-search-label {
        max-inline-size: 600px;
    }
}
.content-top .content-search .content-search-label input.is-blank {
    min-inline-size: 300px;
}

.content-search-label is an inline-grid that grows with the value (the ::after pseudo-element mirrors data-value — the "auto-growing input" technique). The input itself is max-inline-size: unset, so the cap comes from the label wrapper, not from the input. The field is therefore between 300px and 600px wide inside a container stretched to the full row.

Suggested fix

Either:

  1. Drop/raise the max-inline-size: 600px on .content-search-label (or use width: 100%) so the field fills the container.
  2. Or don't stretch .content-search to the full row (remove its flex: 1), so the container matches the field and the dead zone isn't styled as part of it.

[ctx_shell: bare cat redirected to ctx_read for inline delivery. Use ctx_read(path="/tmp/opencode/ea-searchfield-issue-en.md") directly next time.]

Dominant language
PHP
Stars
4.3k
Forks
1.1k
Avg merge
1d 23h
Merged PRs (30d)
28

Getting set up

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.

More from EasyCorp/EasyAdminBundle

All issues in EasyCorp/EasyAdminBundle

Similar issues

More PHP issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.