Symptom
On a list page with enough filters to wrap onto a second line at typical viewport widths, Clear all and Customize end up on the wrapped row, visually separate from the filter pills — they look like a different toolbar / a different container, not "the last buttons of the filter row."
Confirmed on django-admin-react==1.0.1 (latest stable), light theme, served from the installed wheel (/admin2/...).
Expected
Per the original intent of #554 and the closing PR #558 ("move Customize onto the filter row, after Clear all"): Customize is always the last button of the filter row. When filter pills wrap, Customize wraps with them — staying visually attached to the same flex container, not rendered as a separate trailing group.
In other words, the filter pills + (Clear all when present) + Customize should all be children of one flex/wrap container, so wrapping is uniform and they share the same row gap, line-height, and visual grouping.
Actual
Layout reads as two distinct elements:
- A left group: search input + filter pills (which wraps internally).
- A right group: Clear all + Customize, right-aligned, rendered in what looks like a sibling container that wraps on its own.
When the filters take two rows, this produces:
[Search] [Filter A] [Filter B] [Filter C] [Filter D] [Filter E] [Filter F] [Filter G]
[Filter H] [Clear all] [Customize]
The user perceives "the buttons appear separately." This is the same complaint that #554 was filed for, partly addressed by #558 but still visible on wrap.
Probable cause
ListPage.tsx likely renders filters and the (Clear all + Customize) group as two flex siblings inside a justify-between parent. That produces the wrap-into-separate-rows behavior even when the intent is "always last on the filter row."
Suggested fix direction
Render filters + Clear all + Customize as direct children of a single flex flex-wrap container (no justify-between wrapping subgroup). Use margin / order classes to push Clear all and Customize to the trailing edge — e.g. ml-auto on Clear all so the natural flow keeps them at the end of the wrapped row, with the same row gap as the rest of the pills.
Repro
- Open any list page whose model has ≥ 8 list_filters at a 1440px-ish viewport.
- Apply one filter so
Clear all becomes visible.
- Observe that Clear all + Customize render on a new line, visually divorced from the filter pills.
References
Symptom
On a list page with enough filters to wrap onto a second line at typical viewport widths, Clear all and Customize end up on the wrapped row, visually separate from the filter pills — they look like a different toolbar / a different container, not "the last buttons of the filter row."
Confirmed on
django-admin-react==1.0.1(latest stable), light theme, served from the installed wheel (/admin2/...).Expected
Per the original intent of #554 and the closing PR #558 ("move Customize onto the filter row, after Clear all"): Customize is always the last button of the filter row. When filter pills wrap, Customize wraps with them — staying visually attached to the same flex container, not rendered as a separate trailing group.
In other words, the filter pills + (Clear all when present) + Customize should all be children of one flex/wrap container, so wrapping is uniform and they share the same row gap, line-height, and visual grouping.
Actual
Layout reads as two distinct elements:
When the filters take two rows, this produces:
The user perceives "the buttons appear separately." This is the same complaint that #554 was filed for, partly addressed by #558 but still visible on wrap.
Probable cause
ListPage.tsxlikely renders filters and the (Clear all + Customize) group as two flex siblings inside ajustify-betweenparent. That produces the wrap-into-separate-rows behavior even when the intent is "always last on the filter row."Suggested fix direction
Render filters + Clear all + Customize as direct children of a single
flex flex-wrapcontainer (nojustify-betweenwrapping subgroup). Use margin / order classes to push Clear all and Customize to the trailing edge — e.g.ml-autoon Clear all so the natural flow keeps them at the end of the wrapped row, with the same row gap as the rest of the pills.Repro
Clear allbecomes visible.References
frontend/apps/web/src/pages/ListPage.tsx