fix(admin): realign application edit panel (BUNYIP-460) #459

Merged

longjacksonle merged 1 commit from fix/BUNYIP-460-application-panel-alignment into main

2026-08-04 19:33:15 +02:00

longjacksonle commented

2026-08-04 18:58:16 +02:00

Owner

Fixes the misaligned application edit panel reported in BUNYIP-460. Follow-up polish on the BUNYIP-435 two-column layout.

What changed

Section hierarchy: "Binary (Forgejo)" and "Container (OCI)" were text-lg semibold, nearly as loud as the text-2xl "Details"/"Distribution" card titles, so they read as peers rather than nested groups. They are now small muted uppercase subheads with a divider between the Binary and Container groups, so they clearly sit under the Distribution card title.
Orphaned form actions: the Save/Cancel row floated in dead space between the two-column grid and the Group card. It is now a full-width bordered footer (border-t) directly under the grid, and the primary button is relabelled "Save application" so it is unmistakably the Details+Distribution Save.
Multiple-Save confusion: the Group card's button is relabelled "Save group" and the card adopts the same title scale + subtitle treatment as the other sections, so it reads as a peer section whose Save is scoped to group assignment.
Danger Zone alignment: it was capped at max-w-2xl and rendered narrower than the full-width cards above it. The cap is removed so it spans the same width; the red-card password/2FA delete pattern is kept as-is.
Consistent vertical rhythm: the trailing Group and Danger Zone sections share the same mt-8 gap below the form.

Scoped out (with reasons)

Literal row-to-row baseline alignment across the two columns is not achievable or meaningful: Details and Distribution hold different field counts, so their rows cannot line up one-to-one. The grid already top-aligns (items-start), is equal-width (lg:grid-cols-2), and both columns collapse cleanly to a single column below lg.
The status pills (Hub / No Binary / No OCI) already share one badge component and one style, so no change was needed.

Notes

The pt-6 footer utility was newly used, so the tracked Tailwind stylesheet (bunyip-web/assets/styles.css) is rebuilt to include it. The rebuild is deterministic (tailwind v4.3.0), so the diff is the single added rule.

Verification

just check-container green: fmt + clippy (-D warnings) + full workspace tests (177 passed) in the pinned rust-builder container.
Unit assertions in application_form_uses_two_column_blocks lock in the bordered "Save application" footer and the removal of the old loud subsection heading style.
A screenshot render of the full edit page confirms the four visual fixes (nested subheads, bordered footer, peer-scaled Group card, full-width Danger Zone).

🤖 Generated with Claude Code

https://claude.ai/code/session_018TXaT3P192nDsZzbzHETb9

Fixes the misaligned application edit panel reported in [BUNYIP-460](https://niceguyit.myjetbrains.com/youtrack/issue/BUNYIP-460). Follow-up polish on the BUNYIP-435 two-column layout. ## What changed - Section hierarchy: "Binary (Forgejo)" and "Container (OCI)" were `text-lg` semibold, nearly as loud as the `text-2xl` "Details"/"Distribution" card titles, so they read as peers rather than nested groups. They are now small muted uppercase subheads with a divider between the Binary and Container groups, so they clearly sit under the Distribution card title. - Orphaned form actions: the Save/Cancel row floated in dead space between the two-column grid and the Group card. It is now a full-width bordered footer (`border-t`) directly under the grid, and the primary button is relabelled "Save application" so it is unmistakably the Details+Distribution Save. - Multiple-Save confusion: the Group card's button is relabelled "Save group" and the card adopts the same title scale + subtitle treatment as the other sections, so it reads as a peer section whose Save is scoped to group assignment. - Danger Zone alignment: it was capped at `max-w-2xl` and rendered narrower than the full-width cards above it. The cap is removed so it spans the same width; the red-card password/2FA delete pattern is kept as-is. - Consistent vertical rhythm: the trailing Group and Danger Zone sections share the same `mt-8` gap below the form. ## Scoped out (with reasons) - Literal row-to-row baseline alignment across the two columns is not achievable or meaningful: Details and Distribution hold different field counts, so their rows cannot line up one-to-one. The grid already top-aligns (`items-start`), is equal-width (`lg:grid-cols-2`), and both columns collapse cleanly to a single column below `lg`. - The status pills (Hub / No Binary / No OCI) already share one badge component and one style, so no change was needed. ## Notes - The `pt-6` footer utility was newly used, so the tracked Tailwind stylesheet (`bunyip-web/assets/styles.css`) is rebuilt to include it. The rebuild is deterministic (tailwind v4.3.0), so the diff is the single added rule. ## Verification - `just check-container` green: fmt + clippy (`-D warnings`) + full workspace tests (177 passed) in the pinned rust-builder container. - Unit assertions in `application_form_uses_two_column_blocks` lock in the bordered "Save application" footer and the removal of the old loud subsection heading style. - A screenshot render of the full edit page confirms the four visual fixes (nested subheads, bordered footer, peer-scaled Group card, full-width Danger Zone). 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_018TXaT3P192nDsZzbzHETb9

longjacksonle added 1 commit

2026-08-04 18:58:17 +02:00

fix(admin): realign application edit panel (BUNYIP-460)

E2E PR gate / Install + reachability (no deployment secrets) (pull_request) Successful in 17s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 4m57s

Details

Create release / Create release from merged PR (pull_request) Has been skipped

Details

8add73ae47

The application edit page had four layout problems flagged in BUNYIP-460. The "Binary (Forgejo)" and "Container (OCI)" headings were `text-lg` semibold, nearly as loud as the `text-2xl` "Details"/"Distribution" card titles, so the subsections did not read as nested. The Save/Cancel row floated in dead space between the two-column grid and the Group card with no visual tie to the form, and the Group card carried its own "Save" right below it, making it unclear which Save applied to which section. The Group card header was a smaller `text-lg` than the other sections, and the Danger Zone card was capped at `max-w-2xl` so it rendered narrower than the full-width cards above it.

Binary/Container are now muted uppercase subheads (`text-xs uppercase tracking-wide text-muted-foreground`) with a divider between the two groups, so they clearly nest under the Distribution title. The form actions become a full-width bordered footer directly under the grid, and the primary button is relabelled "Save application"; the Group card adopts the shared card title + subtitle treatment and relabels its button "Save group", so each Save is unmistakably scoped. The Danger Zone loses its width cap to align with the other cards, keeping its red-card password/2FA pattern. The trailing Group and Danger Zone sections share one `mt-8` gap for a consistent rhythm.

Row-to-row baseline alignment across the two columns is deliberately not pursued: Details and Distribution hold different field counts, so their rows cannot line up one-to-one. The grid already top-aligns, is equal-width, and collapses cleanly to a single column below `lg`.

The `pt-6` footer utility was newly used, so the tracked Tailwind stylesheet is rebuilt to include it. Unit assertions lock in the bordered/relabelled footer and the removal of the old loud subsection heading style.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018TXaT3P192nDsZzbzHETb9