fix(web): label download affordance by surface + center its dialog #300

Merged

nrupard merged 1 commit from fix/BUNYIP-289-app-card-oci-label-and-dialog-center into main

2026-06-30 20:32:37 +02:00

nrupard commented

2026-06-30 20:15:21 +02:00

Owner

Fixes BUNYIP-289. Two bugs in the member Applications page distribution affordance (download_affordance in bunyip-web/src/handlers/dashboard.rs).

1. Button label ignored the distribution surface

The button was always "Download", even for products that ship only an OCI image (e.g. Mokosh Server/Web, which have no binary assets) or both. It now labels by what the product actually offers:

binary assets only -> "Download"
OCI image only -> "OCI"
both -> "Download/OCI"

(match (!g.assets.is_empty(), g.oci.is_some()).)

2. Options dialog opened in the top-left, not centered

A native modal <dialog> is centered by the UA rule dialog:modal { margin: auto }. Tailwind v4 Preflight resets margin: 0 on * (confirmed in the compiled assets/styles.css: *,:after,:before,::backdrop{...margin:0;padding:0}), so the UA centering never applies and the dialog pinned to the top-left. Added m-auto to the dialog to restore margin: auto, and regenerated assets/styles.css so the .m-auto{margin:auto} utility is emitted.

Verification

just check-container green (fmt + clippy -D warnings + workspace lib tests). The CSS regen is a 1-line diff (.m-auto{margin:auto}); the bun.lock churn (a cosmetic configVersion field) was reverted to keep the diff focused. The production image rebuilds the CSS at build time, so the new utility is also picked up there.

Behavioural notes: OCI-only products now correctly surface the dialog ("OCI" button -> docker login/pull copy blocks) since the OCI copy blocks are 2 options (no single-asset shortcut). No API change; the /v1/downloads list already returns the oci field that drives this.

Fixes BUNYIP-289. Two bugs in the member Applications page distribution affordance (`download_affordance` in bunyip-web/src/handlers/dashboard.rs). ## 1. Button label ignored the distribution surface The button was always "Download", even for products that ship only an OCI image (e.g. Mokosh Server/Web, which have no binary assets) or both. It now labels by what the product actually offers: - binary assets only -> "Download" - OCI image only -> "OCI" - both -> "Download/OCI" (`match (!g.assets.is_empty(), g.oci.is_some())`.) ## 2. Options dialog opened in the top-left, not centered A native modal `<dialog>` is centered by the UA rule `dialog:modal { margin: auto }`. Tailwind v4 Preflight resets `margin: 0` on `*` (confirmed in the compiled `assets/styles.css`: `*,:after,:before,::backdrop{...margin:0;padding:0}`), so the UA centering never applies and the dialog pinned to the top-left. Added `m-auto` to the dialog to restore `margin: auto`, and regenerated `assets/styles.css` so the `.m-auto{margin:auto}` utility is emitted. ## Verification `just check-container` green (fmt + clippy -D warnings + workspace lib tests). The CSS regen is a 1-line diff (`.m-auto{margin:auto}`); the bun.lock churn (a cosmetic `configVersion` field) was reverted to keep the diff focused. The production image rebuilds the CSS at build time, so the new utility is also picked up there. Behavioural notes: OCI-only products now correctly surface the dialog ("OCI" button -> docker login/pull copy blocks) since the OCI copy blocks are 2 options (no single-asset shortcut). No API change; the `/v1/downloads` list already returns the `oci` field that drives this.

nrupard added 1 commit

2026-06-30 20:15:21 +02:00

fix(web): label download affordance by surface + center its dialog

E2E / Playwright against deployment (pull_request) Successful in 23s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 17m12s

Details

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

Details

adc83d8e47

The Applications page renders one distribution affordance per product. Two bugs (BUNYIP-289):

1. The button was always labelled "Download", even for products distributed only as an OCI image (e.g. Mokosh Server/Web, which ship no binaries) or as both. `download_affordance` now labels by the surfaces the product actually offers: "Download" (binary only), "OCI" (OCI image only), or "Download/OCI" (both).

2. The options dialog opened pinned to the top-left instead of centered. A native modal `<dialog>` centers via the UA `dialog:modal { margin: auto }`, but Tailwind v4 Preflight resets `margin: 0` on `*` (and `::backdrop`), so that centering never applies. Add `m-auto` to the dialog to restore it, and regenerate `assets/styles.css` so the `.m-auto` utility is emitted.

#BUNYIP-289

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

nrupard scheduled this pull request to auto merge when all checks succeed

2026-06-30 20:28:41 +02:00