jwed/central-unifi
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

WiFi Dashboard: '# of APs' input clipped off-screen at 390px #7

New Issue
Closed
opened 2026-08-03 18:48:30 -07:00 by jwed · 6 comments
jwed commented 2026-08-03 18:48:30 -07:00
Owner
Copy Link

Steps

  1. Log in as superadmin (dev login), resize viewport to 390x844.
  2. Navigate to /app/network (route unifi.dashboard, "WiFi Dashboard").
  3. Scroll to the "Channel Utilization (Airtime)" card (and similarly "Traffic per AP (Mbps)").
  4. Inspect the "Floor / Ceiling / # of APs" control row at the top of each card.

Expected

All three numeric inputs (Floor, Ceiling, # of APs) should be visible and usable within the 390px viewport, wrapping to a new line if needed.

Actual

The "# of APs" input is clipped off the right edge of the card and off the viewport entirely — it's not wrapped, just cut off. Measured via getBoundingClientRect():

  • Channel Utilization card's "# of APs" input: right edge at x=404.8 vs innerWidth=390 → 15px off-screen.
  • Traffic per AP card's "# of APs" input: right edge at x=409.7 → 20px off-screen.

The row appears to use a fixed/inline layout for the three Floor/Ceiling/#-of-APs fields that doesn't wrap on narrow viewports, unlike the "Clients per AP" and "Retries & Drops per AP" cards (which only have 2 fields and fit fine).

Screenshot (cropped to the Channel Utilization card) shows the "# of APs:" label present but its input box invisible/cut off.

Persona

superadmin@playwright.test

URL

https://central-dev.vancs.org/app/network

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

## Steps 1. Log in as superadmin (dev login), resize viewport to 390x844. 2. Navigate to `/app/network` (route `unifi.dashboard`, "WiFi Dashboard"). 3. Scroll to the "Channel Utilization (Airtime)" card (and similarly "Traffic per AP (Mbps)"). 4. Inspect the "Floor / Ceiling / # of APs" control row at the top of each card. ## Expected All three numeric inputs (Floor, Ceiling, # of APs) should be visible and usable within the 390px viewport, wrapping to a new line if needed. ## Actual The "# of APs" input is clipped off the right edge of the card and off the viewport entirely — it's not wrapped, just cut off. Measured via `getBoundingClientRect()`: - Channel Utilization card's "# of APs" input: right edge at x=404.8 vs innerWidth=390 → 15px off-screen. - Traffic per AP card's "# of APs" input: right edge at x=409.7 → 20px off-screen. The row appears to use a fixed/inline layout for the three Floor/Ceiling/#-of-APs fields that doesn't wrap on narrow viewports, unlike the "Clients per AP" and "Retries & Drops per AP" cards (which only have 2 fields and fit fine). Screenshot (cropped to the Channel Utilization card) shows the "# of APs:" label present but its input box invisible/cut off. ## Persona superadmin@playwright.test ## URL https://central-dev.vancs.org/app/network --- _Filed automatically by the Claude-driven QA sweep (`/opt/qa-agent`). The marker below dedupes repeat reports — do not edit it._ <!-- claude-qa-fingerprint: 885a70e35aeb -->
jwed added the mobile-overflow label 2026-08-03 18:48:30 -07:00
jwed commented 2026-08-04 06:35:22 -07:00
Author
Owner
Copy Link

Steps

  1. Log in as superadmin (dev login), resize viewport to 390x844.
  2. Navigate to /app/network (route unifi.dashboard, "WiFi Dashboard").
  3. Inspect the "Floor / Ceiling / # of APs" control row in "Channel Utilization" and "Traffic per AP" cards.

Expected

All three numeric inputs should be visible within the 390px viewport.

Actual

Re-verified 2026-08-04 (mobile sweep): still reproducing, essentially identical measurements to original report.

  • Channel Utilization card's "# of APs" input: right edge at x=404.8 vs innerWidth=390 -> 14.8px off-screen.
  • Traffic per AP card's "# of APs" input: right edge at x=409.7 -> 19.7px off-screen.
    Other cards (Floor deviation, Ceiling clients, Floor retries -- only 2 fields each) remain fine.

Persona

superadmin@playwright.test

URL

https://central-dev.vancs.org/app/network

## Steps 1. Log in as superadmin (dev login), resize viewport to 390x844. 2. Navigate to `/app/network` (route `unifi.dashboard`, "WiFi Dashboard"). 3. Inspect the "Floor / Ceiling / # of APs" control row in "Channel Utilization" and "Traffic per AP" cards. ## Expected All three numeric inputs should be visible within the 390px viewport. ## Actual Re-verified 2026-08-04 (mobile sweep): still reproducing, essentially identical measurements to original report. - Channel Utilization card's "# of APs" input: right edge at x=404.8 vs innerWidth=390 -> 14.8px off-screen. - Traffic per AP card's "# of APs" input: right edge at x=409.7 -> 19.7px off-screen. Other cards (Floor deviation, Ceiling clients, Floor retries -- only 2 fields each) remain fine. ## Persona superadmin@playwright.test ## URL https://central-dev.vancs.org/app/network
jwed commented 2026-08-05 18:56:01 -07:00
Author
Owner
Copy Link

Still occurring as of this run (mobile plan, 2026-08-06 ~01:55 UTC).

Re-checked /app/network (WiFi Dashboard) as superadmin@playwright.test at 390x844. The
"# of APs" numeric input in the "Channel Utilization" card is still clipped off the right edge
of the viewport — confirmed visually via screenshot (label "# of APs" visible, input box itself
cut off past x=390). Same symptom as originally reported.

Still occurring as of this run (mobile plan, 2026-08-06 ~01:55 UTC). Re-checked `/app/network` (WiFi Dashboard) as `superadmin@playwright.test` at 390x844. The "# of APs" numeric input in the "Channel Utilization" card is still clipped off the right edge of the viewport — confirmed visually via screenshot (label "# of APs" visible, input box itself cut off past x=390). Same symptom as originally reported.
jwed commented 2026-08-06 00:14:16 -07:00
Author
Owner
Copy Link

Still occurring as of 2026-08-06T07:14Z (full-sweep run, mobile pass). /app/network WiFi Dashboard at 390x844: the "# of APs" numeric input in the "Channel Utilization" card is still clipped off the right edge of the viewport, same as previously reported — screenshot confirms only the "# of APs:" label is visible, input box off-screen.

Still occurring as of 2026-08-06T07:14Z (full-sweep run, mobile pass). `/app/network` WiFi Dashboard at 390x844: the "# of APs" numeric input in the "Channel Utilization" card is still clipped off the right edge of the viewport, same as previously reported — screenshot confirms only the "# of APs:" label is visible, input box off-screen.
jwed commented 2026-08-06 06:06:22 -07:00
Author
Owner
Copy Link

Still occurring as of 2026-08-06T13:06Z (full-sweep run, superadmin, 390×844).

Re-checked /app/network (WiFi Dashboard): two of the "# of APs" number inputs (in the Ceiling%/Mbps cards) have their bounding-box right edge at 404.8px/409.7px against a 390px viewport — 15-20px clipped off-screen. Confirmed via getBoundingClientRect(), not just the accessibility tree.

Still occurring as of `2026-08-06T13:06Z` (full-sweep run, superadmin, 390×844). Re-checked `/app/network` (WiFi Dashboard): two of the "# of APs" number inputs (in the Ceiling%/Mbps cards) have their bounding-box right edge at 404.8px/409.7px against a 390px viewport — 15-20px clipped off-screen. Confirmed via `getBoundingClientRect()`, not just the accessibility tree.
jwed commented 2026-08-06 12:06:25 -07:00
Author
Owner
Copy Link

Still occurring as of this run's mobile pass (390x844, superadmin persona):
/app/network "# of APs" numeric inputs in the Channel Utilization and Traffic
per AP cards remain clipped off the right edge of the viewport (measured
~15px and ~20px past window.innerWidth via getBoundingClientRect()). No
fix visible yet.

Still occurring as of this run's mobile pass (390x844, superadmin persona): `/app/network` "# of APs" numeric inputs in the Channel Utilization and Traffic per AP cards remain clipped off the right edge of the viewport (measured ~15px and ~20px past `window.innerWidth` via `getBoundingClientRect()`). No fix visible yet.
jwed commented 2026-08-06 19:06:48 -07:00
Author
Owner
Copy Link

Fixed. All five "# of APs" inputs now measure fully on-screen at 390px
(checked by bounding-rect right <= innerWidth, not by eye).

Five chart headers used flex items-center justify-between with no wrap, and a
nested flex items-center gap-3 for the controls. At 390px the title holds its
width and the control cluster is pushed past the right edge — with no
horizontal scroll on the container, the input is simply unreachable.

flex items-center justify-between mb-2
  → flex flex-wrap items-center justify-between gap-y-2 mb-2

flex items-center gap-3 text-xs text-gray-400
  → flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-gray-400

gap-y rather than a margin so the wrapped state doesn't add space at desktop
widths, where nothing wraps and the layout is unchanged.

Fixed. All five "# of APs" inputs now measure fully on-screen at 390px (checked by bounding-rect `right <= innerWidth`, not by eye). Five chart headers used `flex items-center justify-between` with no wrap, and a nested `flex items-center gap-3` for the controls. At 390px the title holds its width and the control cluster is pushed past the right edge — with no horizontal scroll on the container, the input is simply unreachable. ``` flex items-center justify-between mb-2 → flex flex-wrap items-center justify-between gap-y-2 mb-2 flex items-center gap-3 text-xs text-gray-400 → flex flex-wrap items-center gap-x-3 gap-y-2 text-xs text-gray-400 ``` `gap-y` rather than a margin so the wrapped state doesn't add space at desktop widths, where nothing wraps and the layout is unchanged.
jwed closed this issue 2026-08-06 19:06:49 -07:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
e2e-failure
Automated e2e test failure
 mobile-overflow
Automated e2e test failure
No Label mobile-overflow
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
central-fleet jwed
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jwed/central-unifi#7
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?