Detail page header: title gets squeezed by the action-button toolbar, and toolbar isn't right-aligned

[martin-castro-laminr-ai]

Symptom

On the detail page (/admin2/<app>/<model>/<pk>/change/), the header row puts the H1 title on the left and the action toolbar (bulk actions + Edit + Delete) on the right inside what looks like a 50/50 split. Two problems result:

1. Title is squeezed. When the model verbose name (or the rendered object label) is even mildly long, it wraps to 2–3 lines because the action toolbar is eating half the row width — even on a 1440px viewport. The title is the most important element on the page and is being demoted by the toolbar.
2. Toolbar isn't right-aligned. The toolbar block sits in its column but the buttons within it start at the column's left edge, not its right edge. When the toolbar wraps onto two rows, the second row is also left-aligned within the right column, which reads as "centred between title and viewport edge" rather than "right-aligned to the page."

Confirmed on django-admin-react==1.0.1, light theme.

Expected

Header layout for a detail page:

Home / Section / Sub-section
ObjectTitle (possibly long)                                [Btn] [Btn] [Btn] [Btn] [Edit] [Delete]

• Title gets as much horizontal space as it needs, only flexing when the toolbar genuinely overflows.
• Toolbar is flush right to the page padding, growing leftward as needed.
• When the toolbar wraps onto a second row, each row is right-aligned so the rightmost button stays at the page edge.
• The title and toolbar share a single flex items-start justify-between parent; the toolbar uses flex flex-wrap justify-end internally.

Actual

Home / Section / Sub-section
ObjectTitle that ran   [Btn] [Btn long label] [Btn long label]
out of room because [Another button] [Edit] [Delete]
the toolbar took
half the width

• Title wrapped to multiple lines unnecessarily.
• Buttons left-aligned within their column; second-row buttons sit roughly under the first button of row 1, not flush right.

Probable cause

DetailPage.tsx header is rendered as something like:

<div className="grid grid-cols-2">
  <div>{breadcrumb}<h1>{title}</h1></div>
  <div className="flex flex-wrap">{buttons}</div>
</div>

Two issues with this shape:

1. grid-cols-2 (or any 50/50 split) takes width from the title even when buttons don't need it. Title block should be flex-1 / min-w-0; toolbar block should be flex-shrink-0 and only push the title when it must.
2. The toolbar's flex container needs justify-end (and ml-auto on the toolbar block itself within the outer flex) so wrapped rows stay right-aligned.

Suggested fix direction

Outer container: flex items-start justify-between gap-4.
Title block: flex-1 min-w-0 (allows the H1 to use whatever room is available).
Toolbar block: flex flex-wrap justify-end gap-2 shrink-0 (button rows hug the right edge; toolbar only pushes the title when it genuinely needs more room than gap-4 provides).

If even with justify-end the toolbar still consumes too much width on average pages, consider collapsing the rarely-used bulk actions into a "More actions" dropdown so the visible buttons are: Edit, Delete, plus a single ⋯ menu — drastically less space, much cleaner alignment.

Repro

1. Open any detail page of a model whose ModelAdmin declares 2–4 admin actions with long human-readable names (e.g. "Mark selected items as default").
2. Observe: title wraps to multiple lines even with screen width to spare.
3. Observe: action buttons render as a left-aligned grid in the right column, not flush-right to the viewport.

References

• Affected file: frontend/apps/web/src/pages/DetailPage.tsx
• Related layout work: Detail page: per-object action buttons reusing the changelist actions API (single-pk runs) #555 / feat(spa): detail-page admin action buttons reusing the changelist actions API (#555) #562 (which added these buttons to the detail page in the first place)
• Related: Detail page: per-object (single-pk) actions missing — only the changelist multi-select actions render (follow-up to #555 / PR #562) #571 (per-object vs bulk-action separation on detail pages)

[MartinCastroAlvarez]

Shipped in v1.0.2 (PR #573, commit e3cdd34). Live on PyPI: https://pypi.org/project/django-admin-react/1.0.2/

Header layout fixed per the suggested direction: title block → min-w-0 flex-1 (claims all available width, truncates only when it must); toolbar block → shrink-0 flex-wrap justify-end (toolbar only pushes the title when it genuinely can't fit, and wrapped button rows hug the right edge instead of being left-aligned within their column).