Skip to content

Detail-page toolbar: keep History / Refresh / Edit / Delete inline with custom actions, not in a right-aligned column #677

@martin-castro-laminr-ai

Description

@martin-castro-laminr-ai

Symptom

On 1.11.0 the detail-page toolbar now correctly wraps to multiple lines (great — #672 / #674 landed), but the built-in cluster (History clock icon at far-left + Refresh + Edit + Delete) is laid out as a separate visual column instead of flowing inline with the custom `@admin.action` buttons.

What it looks like today (two-line toolbar, screenshot in the originating chat):

```
[🕐] [Delete selected files] [Run Tamper Analysis] [Generate Pre-signed URL] [Clear Parser Cache] [Reprocess (Custom)] [Disable All Selected Files] [Enable All Selected Files]

[Clear parser cache for selected files] [Reprocess selected files] [Reprocess] [↻] [Edit] [Delete]
```

The History clock is anchored hard-left on row 1, and Refresh / Edit / Delete are pushed hard-right on row 2 via what looks like `margin-left: auto` (or a flex "spacer"). The gap between "Reprocess" and "↻ Edit Delete" is visually a second column rather than a continuation of the toolbar flow.

Expected

All of History / Refresh / Edit / Delete should be just regular toolbar buttons that wrap inline with the custom actions, in the same flex flow:

```
[🕐] [Delete selected files] [Run Tamper Analysis] [Generate Pre-signed URL] [Clear Parser Cache] [Reprocess (Custom)] [Disable All Selected Files]

[Enable All Selected Files] [Clear parser cache for selected files] [Reprocess selected files] [Reprocess] [↻] [Edit] [Delete]
```

Wherever they fall in the wrap, they fall. No `margin-left: auto` separator, no "primary cluster" treatment, no second-column visual.

Why this matters

  • Two visual columns in one toolbar reads as two separate toolbars, which is misleading — they are all just buttons that operate on the current record.
  • The right-aligned cluster floats independently of the actions it logically follows, so on narrow viewports it can end up above its own row's actions or visually disconnected.
  • The fix is also simpler: a single flat list of buttons in a `flex-wrap: wrap` container, no auto-margin spacer.

Acceptance criteria

  • Toolbar is a single `flex-wrap: wrap` container; no element inside it uses `margin-left: auto` (or equivalent flex spacer / grid column-end-trick) to right-align a subset.
  • Button ordering in DOM: `[History] [...custom batch actions in registration order] [...custom detail-target actions] [Refresh] [Edit] [Delete]` — render order matches DOM order, with no skipping.
  • Visual snapshot at 1920 / 1280 / 1024 / 768 / 480 px shows the buttons flowing left-to-right and wrapping naturally, with the History/Refresh/Edit/Delete buttons visually indistinguishable in placement from the custom actions (same row continuation, not a separate cluster).
  • If a built-in needs styling emphasis (e.g. Delete is destructive → red), it's done via the button's own `variant` / `color` prop, not via positional layout.

Out of scope

  • Whether Edit/Delete should appear at all — that's a separate permission-gating concern.
  • The History clock icon's positioning relative to text labels — keep current size.

Screenshot

User screenshot on stage /admin2/files/file/<pk>/ attached in the originating chat — toolbar wraps to 2 lines and the History + Refresh/Edit/Delete cluster sits in a visually separate right column.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions