Captive Portal: Add VLAN Group form squeezes into a 3-line button at 390px #6

New Issue

jwed · 2026-08-01T18:57:47-07:00

jwed commented

2026-08-01 18:57:47 -07:00

Persona: superadmin@playwright.test

URL: https://central-dev.vancs.org/app/network/portal (route: unifi.portal.settings)

Steps:

Resize browser to 390x844 (phone viewport).
Log in as superadmin, navigate to Network (Unifi) → Captive Portal & Auth.
Look at the "Add VLAN Group" form under the VLAN Groups card.

Expected: The Name / VLAN ID / Description fields and the "Add VLAN Group" submit button lay out usably at a 390px viewport — either stacking to one column or otherwise giving the button enough width for its label.

Actual: The form uses a hardcoded grid grid-cols-3 gap-3 items-end (Unifi/Portal.vue, "Add VLAN Group form", no sm: prefix / no mobile collapse — unlike the sibling "Add mapping" and "Add MAC" forms just below it in the same file, which correctly use grid-cols-2 sm:grid-cols-3). At 390px this leaves each column ~93px wide, so the "Add VLAN Group" button (a plain .btn-primary, no whitespace-nowrap) wraps its own label across 3 lines and balloons to ~76px tall. Not a hard cutoff/overflow, but a squeezed, ugly control that's hard to tap precisely. The equivalent "Edit" row for an existing VLAN group (same component) is fine since its Save/Cancel buttons have short one-word labels.

Fix suggestion: match the pattern already used two forms down in the same file — grid-cols-2 sm:grid-cols-3 (or grid-cols-1 sm:grid-cols-3 per the shell's own two-column convention) — on both the "Add VLAN Group" grid and the sibling "Edit row" grid (grid grid-cols-3 gap-3 items-end, same file) which has the identical hardcoded-3-column issue and would show the same symptom once a longer label is present.

Console errors: none.

Filed automatically by the Claude-driven QA sweep (/opt/qa-agent). The marker below dedupes repeat reports — do not edit it.

**Persona:** superadmin@playwright.test **URL:** https://central-dev.vancs.org/app/network/portal (route: `unifi.portal.settings`) **Steps:** 1. Resize browser to 390x844 (phone viewport). 2. Log in as superadmin, navigate to Network (Unifi) → Captive Portal & Auth. 3. Look at the "Add VLAN Group" form under the VLAN Groups card. **Expected:** The Name / VLAN ID / Description fields and the "Add VLAN Group" submit button lay out usably at a 390px viewport — either stacking to one column or otherwise giving the button enough width for its label. **Actual:** The form uses a hardcoded `grid grid-cols-3 gap-3 items-end` (Unifi/Portal.vue, "Add VLAN Group form", no `sm:` prefix / no mobile collapse — unlike the sibling "Add mapping" and "Add MAC" forms just below it in the same file, which correctly use `grid-cols-2 sm:grid-cols-3`). At 390px this leaves each column ~93px wide, so the "Add VLAN Group" button (a plain `.btn-primary`, no `whitespace-nowrap`) wraps its own label across 3 lines and balloons to ~76px tall. Not a hard cutoff/overflow, but a squeezed, ugly control that's hard to tap precisely. The equivalent "Edit" row for an existing VLAN group (same component) is fine since its Save/Cancel buttons have short one-word labels. **Fix suggestion:** match the pattern already used two forms down in the same file — `grid-cols-2 sm:grid-cols-3` (or `grid-cols-1 sm:grid-cols-3` per the shell's own two-column convention) — on both the "Add VLAN Group" grid and the sibling "Edit row" grid (`grid grid-cols-3 gap-3 items-end`, same file) which has the identical hardcoded-3-column issue and would show the same symptom once a longer label is present. **Console errors:** none. --- _Filed automatically by the Claude-driven QA sweep (`/opt/qa-agent`). The marker below dedupes repeat reports — do not edit it._

jwed added the mobile-overflow label 2026-08-01 18:57:47 -07:00

jwed commented

2026-08-01 22:16:33 -07:00

Root cause: exactly as filed, including the reference pattern. Unifi/Portal.vue had two grids hardcoded grid grid-cols-3 gap-3 items-end with no sm: collapse — the Add form and the Edit row — while "Add mapping" and "Add MAC" further down the same file already use grid-cols-2 sm:grid-cols-3.

Fix:

both grids → grid-cols-2 sm:grid-cols-3;
the edit row's action cell → col-span-2 sm:col-span-3;
the Add button's cell → col-span-2 sm:col-span-1 with whitespace-nowrap w-full sm:w-auto, so on a phone it gets the full width instead of a ~145px half-column. It is the longest button label on the page, so the shell's whitespace-nowrap rule applies to it regardless.

Measured in the dev browser, same DOM, pre-fix classes restored via JS for the before figures:

	before	after
Add VLAN Group @390px	93 x 76px, columns 92.66/92.67/92.66	302 x 36px, columns 145/145
Add VLAN Group @1440px	145 x 36px, three 357px columns	145 x 36px, three 357px columns — unchanged
page scrollWidth	390/390	390/390

Your 93px / 76px / three-line measurements were spot on.

Test — tests/Feature/MobileLayout390Test.php: no grid in Portal.vue may be an unprefixed grid-cols-3 (stated as an invariant so the next one cannot slip in), and the Add VLAN Group label may not wrap. Not added to tests/Browser/mobile_table_overflow.py — nothing overflows the viewport here, before or after, so that probe reads 390/390 either way and would be a hollow pass.

Where the code is: central-unifi's Vue lives in the shell (dashboard-shell/resources/js/Pages/Unifi/Portal.vue), so there is no commit in this repo — the fix is dashboard-shell d854710 on feature/email-provider-seam, pending that branch's push. Closing here since nothing in central-unifi changes; reopen if it is not right once the branch lands.

**Root cause:** exactly as filed, including the reference pattern. `Unifi/Portal.vue` had two grids hardcoded `grid grid-cols-3 gap-3 items-end` with no `sm:` collapse — the Add form and the Edit row — while "Add mapping" and "Add MAC" further down the same file already use `grid-cols-2 sm:grid-cols-3`. **Fix:** - both grids → `grid-cols-2 sm:grid-cols-3`; - the edit row's action cell → `col-span-2 sm:col-span-3`; - the Add button's cell → `col-span-2 sm:col-span-1` with `whitespace-nowrap w-full sm:w-auto`, so on a phone it gets the full width instead of a ~145px half-column. It is the longest button label on the page, so the shell's `whitespace-nowrap` rule applies to it regardless. **Measured in the dev browser**, same DOM, pre-fix classes restored via JS for the before figures: | | before | after | |---|---|---| | Add VLAN Group @390px | **93 x 76px**, columns 92.66/92.67/92.66 | **302 x 36px**, columns 145/145 | | Add VLAN Group @1440px | 145 x 36px, three 357px columns | 145 x 36px, three 357px columns — unchanged | | page scrollWidth | 390/390 | 390/390 | Your 93px / 76px / three-line measurements were spot on. **Test** — `tests/Feature/MobileLayout390Test.php`: no grid in `Portal.vue` may be an unprefixed `grid-cols-3` (stated as an invariant so the next one cannot slip in), and the Add VLAN Group label may not wrap. Not added to `tests/Browser/mobile_table_overflow.py` — nothing overflows the viewport here, before or after, so that probe reads 390/390 either way and would be a hollow pass. **Where the code is:** `central-unifi`'s Vue lives in the shell (`dashboard-shell/resources/js/Pages/Unifi/Portal.vue`), so there is **no commit in this repo** — the fix is dashboard-shell `d854710` on `feature/email-provider-seam`, pending that branch's push. Closing here since nothing in central-unifi changes; reopen if it is not right once the branch lands.

jwed closed this issue

2026-08-01 22:16:34 -07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jwed/central-unifi#6