Ticketing All Tickets: filter sidebar clips text and hides ticket list at 390px #11

New Issue

jwed · 2026-07-28T13:09:20-07:00

jwed commented

2026-07-28 13:09:20 -07:00

Steps

Log in as superadmin (dev login).
Resize browser to 390x844 (mobile viewport).
Navigate to /app/ticketing (route ticketing.index, All Tickets).

Expected

The "All Tickets" page should present a usable single-column mobile layout — either the filter panel (Views/Priority/Projects) OR the ticket queue list, stacked/toggled cleanly with all text fully visible.

Actual

On initial load the page shows only the ticketing filter/navigation panel ("Group switcher", "Views", "Priority", "Projects"). That panel's own inner content is NOT responsive to the 390px viewport — it renders at a fixed offset (inner elements start around x=326px), so most of its labels are clipped by the right edge of the screen: "SWITCHE[R]", "Unassig[ned]", "Resolve[d]", "Mediu[m]", "Urgen[t]", "Project[s]" are all cut off unreadably, with a large blank white area to their left.

Simultaneously, the actual ticket queue (<main> panel that lists tickets like GEN-0001) is rendered squeezed to ~1-32px wide starting at x=390 — i.e. entirely off-screen/invisible. A superadmin cannot see any tickets at all in this state.

There IS a "Done" button that toggles away the filter panel and reveals the ticket list correctly (confirmed clean) — so the app isn't totally unusable, but the default landing state on a fresh page load/mobile viewport is the broken, clipped, content-hiding filter view, and the toggle relationship between "Filters" and "Done" isn't obvious mobile UX.

Root cause appears to be a CSS class on the ticketing app's own internal <aside> (classed w-full shrink-0 ... lg:flex lg:w-72 lg:flex-col) that takes full viewport width below the lg breakpoint but whose children still assume the wider lg:w-72 (288px) layout, causing internal misalignment/clipping, while the adjacent <main> (ticket list, classed min-w-0 ... xl:max-w-[34rem]) collapses to near-zero width instead of stacking below.

Persona

superadmin@playwright.test

URL

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

Console errors

None observed; this is a layout-only issue (window.innerWidth=390, no page-level horizontal scroll — document.body.scrollWidth=390 — the overflow is purely internal/visual clipping, not a scrollable table).

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). 2. Resize browser to 390x844 (mobile viewport). 3. Navigate to `/app/ticketing` (route `ticketing.index`, All Tickets). ## Expected The "All Tickets" page should present a usable single-column mobile layout — either the filter panel (Views/Priority/Projects) OR the ticket queue list, stacked/toggled cleanly with all text fully visible. ## Actual On initial load the page shows only the ticketing filter/navigation panel ("Group switcher", "Views", "Priority", "Projects"). That panel's own inner content is NOT responsive to the 390px viewport — it renders at a fixed offset (inner elements start around x=326px), so most of its labels are clipped by the right edge of the screen: "SWITCHE[R]", "Unassig[ned]", "Resolve[d]", "Mediu[m]", "Urgen[t]", "Project[s]" are all cut off unreadably, with a large blank white area to their left. Simultaneously, the actual ticket queue (`<main>` panel that lists tickets like GEN-0001) is rendered squeezed to ~1-32px wide starting at x=390 — i.e. entirely off-screen/invisible. A superadmin cannot see any tickets at all in this state. There IS a "Done" button that toggles away the filter panel and reveals the ticket list correctly (confirmed clean) — so the app isn't totally unusable, but the default landing state on a fresh page load/mobile viewport is the broken, clipped, content-hiding filter view, and the toggle relationship between "Filters" and "Done" isn't obvious mobile UX. Root cause appears to be a CSS class on the ticketing app's own internal `<aside>` (classed `w-full shrink-0 ... lg:flex lg:w-72 lg:flex-col`) that takes full viewport width below the `lg` breakpoint but whose *children* still assume the wider `lg:w-72` (288px) layout, causing internal misalignment/clipping, while the adjacent `<main>` (ticket list, classed `min-w-0 ... xl:max-w-[34rem]`) collapses to near-zero width instead of stacking below. ## Persona superadmin@playwright.test ## URL https://central-dev.vancs.org/app/ticketing ## Console errors None observed; this is a layout-only issue (`window.innerWidth`=390, no page-level horizontal scroll — `document.body.scrollWidth`=390 — the overflow is purely internal/visual clipping, not a scrollable table). --- _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-07-28 13:09:20 -07:00

jwed commented

2026-07-28 16:59:50 -07:00

Fixed in 0e096da.

You pinned the right element, and there were two independent faults on it.

flex-col was only applied at lg, so below that breakpoint the <aside> was a flex container in the default row direction — its header and every filter section were laid out side by side and ran off the right edge. That is the fixed-offset clipping you saw ("SWITCHE", "Unassig", "Mediu") with the blank area to their left. flex-col is now unconditional.
The rail and <main> were both displayed below lg in the same row, and w-full shrink-0 took the whole 390px without shrinking — so the queue was laid out starting at x=390 with ~1px of width, which matches your measurement exactly. They are now mutually exclusive below lg, via a single display class each: the old :class arrays could hold both flex and hidden at once, leaving the outcome to stylesheet order rather than to what the template asked for.

On your UX point — the rail no longer opens by default, so the mobile landing state is the ticket queue rather than a screen with no tickets on it, and closing a ticket now returns to the queue instead of dropping into the filters.

Measured at 390x844 after the fix: queue at x=0 width=390; rail hidden on landing; with Filters open, flex-direction column, 29 labels measured and 0 clipped, "Group switcher" at x=20-153 (you reported inner content starting at x=326).

Fixed in 0e096da. You pinned the right element, and there were two independent faults on it. 1. `flex-col` was only applied at `lg`, so below that breakpoint the `<aside>` was a flex container in the default **row** direction — its header and every filter section were laid out side by side and ran off the right edge. That is the fixed-offset clipping you saw ("SWITCHE", "Unassig", "Mediu") with the blank area to their left. `flex-col` is now unconditional. 2. The rail and `<main>` were both displayed below `lg` in the same row, and `w-full shrink-0` took the whole 390px without shrinking — so the queue was laid out starting at x=390 with ~1px of width, which matches your measurement exactly. They are now mutually exclusive below `lg`, via a single display class each: the old `:class` arrays could hold both `flex` and `hidden` at once, leaving the outcome to stylesheet order rather than to what the template asked for. On your UX point — the rail no longer opens by default, so the mobile landing state is the ticket queue rather than a screen with no tickets on it, and closing a ticket now returns to the queue instead of dropping into the filters. Measured at 390x844 after the fix: queue at x=0 width=390; rail hidden on landing; with Filters open, flex-direction column, 29 labels measured and 0 clipped, "Group switcher" at x=20-153 (you reported inner content starting at x=326).

jwed closed this issue

2026-07-28 16:59:50 -07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: jwed/central-ticketing#11