feat(admin): two-column block layouts for sparse full-width admin screens (BUNYIP-415) #412

Merged

longjacksonle merged 1 commit from feat/BUNYIP-415-admin-two-column-layouts into main

2026-07-30 03:24:58 +02:00

longjacksonle commented

2026-07-30 03:16:41 +02:00

Owner

What

Closes BUNYIP-415. Sparse full-width admin screens now use a shared two-column block layout that collapses to one column on narrow viewports, so wide screens use the available width and group related settings into blocks instead of one long narrow column.

Shared helper (bunyip-web/src/views/layout.rs)

admin_block(title, subtitle, body) - one settings/content block as a card, matching the inline card markup already used across admin.
admin_block_grid(blocks) - lays blocks in a responsive grid: two columns at lg, one column below, top-aligned (items-start), gap-6 to match the single-column rhythm.

Applied

Stripe / Email / Auto-ban settings (forms): regrouped into two side-by-side blocks inside one form (single Save). Stripe -> Configuration | Checkout; Email -> SMTP Connection | Sender & Notifications; Auto-ban -> Detection | Enforcement. No fields dropped.
Rate Limits / IP Bans / Entitlements (lists): rows flow into a two-column grid (per Vas's "flow the rows into two columns"), keeping per-row separators; collapse to one column below lg.
Application-groups empty state: now a centered block (icon + message). Entitlements' empty state got the same treatment.

Every grid uses lg:grid-cols-2, so narrow viewports keep the original single column with no horizontal overflow.

Tests

admin_block_grid_is_responsive_two_column - the grid emits lg:grid-cols-2 and renders each block + subtitle.
email_screen_uses_two_column_blocks / auto_ban_screen_uses_two_column_blocks - the content functions render as responsive two-column grids and preserve every field after regrouping (the SSR analog of a wide/narrow visual-regression check).
The list-screen conversions reuse the same wrapper and were verified visually.

just check-container green (fmt + clippy -D warnings + build + full workspace tests).

Verification (live stack, screenshots shared in-thread)

Captured each converted screen at wide (1440px) and narrow (560px):

Forms show two side-by-side blocks at wide, stacked at narrow.
Lists (seeded with sample throttles/bans) flow into two columns at wide and a single column at narrow, no horizontal overflow.
The app-groups empty state renders centered.

🤖 Generated with Claude Code

https://claude.ai/code/session_01LerAorB26HGHLfjC9iDUbd

## What Closes BUNYIP-415. Sparse full-width admin screens now use a shared two-column block layout that collapses to one column on narrow viewports, so wide screens use the available width and group related settings into blocks instead of one long narrow column. ## Shared helper (bunyip-web/src/views/layout.rs) - `admin_block(title, subtitle, body)` - one settings/content block as a card, matching the inline card markup already used across admin. - `admin_block_grid(blocks)` - lays blocks in a responsive grid: two columns at `lg`, one column below, top-aligned (`items-start`), `gap-6` to match the single-column rhythm. ## Applied - **Stripe / Email / Auto-ban settings** (forms): regrouped into two side-by-side blocks inside one form (single Save). Stripe -> Configuration | Checkout; Email -> SMTP Connection | Sender & Notifications; Auto-ban -> Detection | Enforcement. No fields dropped. - **Rate Limits / IP Bans / Entitlements** (lists): rows flow into a two-column grid (per Vas's "flow the rows into two columns"), keeping per-row separators; collapse to one column below `lg`. - **Application-groups empty state**: now a centered block (icon + message). Entitlements' empty state got the same treatment. Every grid uses `lg:grid-cols-2`, so narrow viewports keep the original single column with no horizontal overflow. ## Tests - `admin_block_grid_is_responsive_two_column` - the grid emits `lg:grid-cols-2` and renders each block + subtitle. - `email_screen_uses_two_column_blocks` / `auto_ban_screen_uses_two_column_blocks` - the content functions render as responsive two-column grids and preserve every field after regrouping (the SSR analog of a wide/narrow visual-regression check). - The list-screen conversions reuse the same wrapper and were verified visually. `just check-container` green (fmt + clippy -D warnings + build + full workspace tests). ## Verification (live stack, screenshots shared in-thread) Captured each converted screen at wide (1440px) and narrow (560px): - Forms show two side-by-side blocks at wide, stacked at narrow. - Lists (seeded with sample throttles/bans) flow into two columns at wide and a single column at narrow, no horizontal overflow. - The app-groups empty state renders centered. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01LerAorB26HGHLfjC9iDUbd

longjacksonle added 1 commit

2026-07-30 03:16:41 +02:00

feat(admin): two-column block layouts for sparse full-width admin screens (BUNYIP-415)

E2E / Playwright against deployment (pull_request) Successful in 1m35s

Details

Check / fmt + clippy + build + tests (pull_request) Successful in 8m13s

Details

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

Details

2b2e7414bd

Several admin screens rendered a single narrow column across a wide viewport, leaving large dead space and forcing vertical scrolling for content that fits on one screen. This adds a shared two-column block layout and applies it across the called-out screens.

New helpers in bunyip-web/src/views/layout.rs: admin_block(title, subtitle, body) renders one settings block as a card (matching the inline card markup already used), and admin_block_grid(blocks) lays a set of blocks in a responsive grid that is two columns at lg and one column below, top-aligned. These are the reusable building blocks the ticket asked for.

Applied:
- Stripe, Email, and Auto-ban settings: the single narrow forms are regrouped into two side-by-side blocks inside one form (one Save persists everything). Stripe -> Configuration | Checkout; Email -> SMTP Connection | Sender & Notifications; Auto-ban -> Detection | Enforcement. No fields were dropped in the regroup.
- Rate Limits, IP Bans, and Entitlements: the row lists flow into a two-column grid (gap-x, one column below lg), so a long list uses the width. Rows keep their per-row separators.
- Application-groups empty state: now a centered block (icon + message) instead of a bare line; the Entitlements empty state got the same treatment.

All two-column grids collapse to a single column below the lg breakpoint, so narrow viewports keep the original single-column layout with no horizontal overflow.

Tests (bunyip-web): admin_block_grid emits the responsive lg:grid-cols-2 class and renders every block; the Email and Auto-ban content functions render as two-column grids and preserve all fields after regrouping. The list-screen conversions reuse the same wrapper and were verified visually at wide (1440px) and narrow (560px) widths. just check-container is green.

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

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

2026-07-30 03:17:32 +02:00