Follow-up to #658 — bug not actually fixed
#658 was closed COMPLETED but the symptom is still present on django-admin-react 1.10.0 (just shipped). On a detail page whose ModelAdmin has 8+ `@admin.action`s plus Edit + Delete:
- The toolbar lays out on a single row and overflows horizontally.
- The H1 title is pushed off-screen left — the user lands on the page and sees a wall of action buttons but no idea what record they are looking at.
- The breadcrumb is also pushed out.
The visible header row reads:
`…gned URL Clear Parser Cache Reprocess (Custom) Disable All Selected Files Enable All Selected Files Clear parser cache for selected files Reprocess selected files Reprocess [refresh] [Edit] [Delete]`
…and only that — no title, no breadcrumb.
#658 was supposed to fix this by stacking breadcrumb / title / toolbar as 3 full-width rows with `flex-wrap: wrap` on the toolbar row so 8+ actions reflow onto a second line instead of overflowing the page. That fix either didn't ship or didn't take.
Acceptance criteria
Required: many-actions fixture
To make sure this stays fixed and any future regression is caught immediately, add a fixture to `examples/jobs` (or a new `examples/many-actions` app) that has a `Job`-style model with a large number of `@admin.action`s — at least 12 batch actions plus 2 detail-only actions, so:
- a single row of buttons would be visibly impossible at any reasonable viewport,
- the layout has to wrap to multiple lines,
- and a visual snapshot test against that page pins the wrapping behaviour.
Suggested action names (deliberately long so they push width hard):
```python
@admin.action(description="Recompute Derived Field A")
@admin.action(description="Recompute Derived Field B")
@admin.action(description="Recompute Derived Field C")
@admin.action(description="Re-run Pipeline Step 1")
@admin.action(description="Re-run Pipeline Step 2")
@admin.action(description="Re-run Pipeline Step 3")
@admin.action(description="Invalidate Downstream Cache")
@admin.action(description="Mark As Reviewed By Operator")
@admin.action(description="Mark As Pending Operator Review")
@admin.action(description="Export Selected Rows As CSV")
@admin.action(description="Export Selected Rows As JSON")
@admin.action(description="Notify Owner Of Selected Rows")
@admin.action(description="Open Detailed Audit View") # detail-target
@admin.action(description="Replay Last Operation") # detail-target
```
Visual snapshot tests to add:
- List page changelist — all 12 batch actions render in the "Action" dropdown.
- Detail page — toolbar wraps onto 2–3 lines without pushing the title or breadcrumb off-screen at viewports 1280, 1024, and 768 px wide.
- Detail page — Edit + Delete remain right-aligned on the last toolbar line, separated from custom actions by `margin-left: auto` or an equivalent flex break.
- Mobile snapshot at 480 px — toolbar stacks vertically; title still visible above; no horizontal scroll.
Screenshot
User screenshot on stage /admin2/files/file/<pk>/ attached in the originating chat — the entire visible header band is action buttons; title and breadcrumb are off-screen.
Related
Follow-up to #658 — bug not actually fixed
#658 was closed COMPLETED but the symptom is still present on django-admin-react 1.10.0 (just shipped). On a detail page whose ModelAdmin has 8+ `@admin.action`s plus Edit + Delete:
The visible header row reads:
`…gned URL Clear Parser Cache Reprocess (Custom) Disable All Selected Files Enable All Selected Files Clear parser cache for selected files Reprocess selected files Reprocess [refresh] [Edit] [Delete]`
…and only that — no title, no breadcrumb.
#658 was supposed to fix this by stacking breadcrumb / title / toolbar as 3 full-width rows with `flex-wrap: wrap` on the toolbar row so 8+ actions reflow onto a second line instead of overflowing the page. That fix either didn't ship or didn't take.
Acceptance criteria
Required: many-actions fixture
To make sure this stays fixed and any future regression is caught immediately, add a fixture to `examples/jobs` (or a new `examples/many-actions` app) that has a `Job`-style model with a large number of `@admin.action`s — at least 12 batch actions plus 2 detail-only actions, so:
Suggested action names (deliberately long so they push width hard):
```python
@admin.action(description="Recompute Derived Field A")
@admin.action(description="Recompute Derived Field B")
@admin.action(description="Recompute Derived Field C")
@admin.action(description="Re-run Pipeline Step 1")
@admin.action(description="Re-run Pipeline Step 2")
@admin.action(description="Re-run Pipeline Step 3")
@admin.action(description="Invalidate Downstream Cache")
@admin.action(description="Mark As Reviewed By Operator")
@admin.action(description="Mark As Pending Operator Review")
@admin.action(description="Export Selected Rows As CSV")
@admin.action(description="Export Selected Rows As JSON")
@admin.action(description="Notify Owner Of Selected Rows")
@admin.action(description="Open Detailed Audit View") # detail-target
@admin.action(description="Replay Last Operation") # detail-target
```
Visual snapshot tests to add:
Screenshot
User screenshot on stage
/admin2/files/file/<pk>/attached in the originating chat — the entire visible header band is action buttons; title and breadcrumb are off-screen.Related