m/paliad
1
0
Fork 0
Code Issues 152 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

/events: horizontal scroll on mobile from matters-selector dropdown width #86

New Issue
Open
opened 2026-05-25 11:54:38 +00:00 by mAi · 1 comment
mAi commented 2026-05-25 11:54:38 +00:00
Collaborator
Copy Link

m's report (2026-05-25 13:53)

On the main events page I have horizontal scrolling on mobile due to the matters selector dropdown's width. Generally sensible, but maybe we need to somehow allow linebreaks or have a different kind of selector? But I really dont want horizontal scrolling in mobile

Scope

/events page on a mobile viewport — the matters (projects) selector / multi-select dropdown is wider than the screen, forcing horizontal page scroll. m's hard rule: NO horizontal scrolling on mobile.

What to do

  1. Reproduce on mobile viewport (Playwright or DevTools mobile preview at ~375px width). Identify which component renders the matters selector — likely lives in frontend/src/events.tsx filter row or a shared client/filter-bar/*.ts axis component.
  2. Audit whether the same selector lives elsewhere (Custom-View filter bar, /agenda, /inbox after the overhaul lands). Whatever fix lands should not regress other surfaces — but should also bring them along if they have the same problem.
  3. Pick a fix from these options (coder's call; document the choice in commit message):
    • A. Allow linebreaks in the selected-pills list inside the trigger — the trigger grows in height instead of width on mobile. Multi-line trigger + collapse to single line on desktop.
    • B. Switch to a different selector pattern on mobile — e.g. a bottom-sheet drawer (tap selector → drawer slides up with the full project tree), or a full-screen modal picker.
    • C. Collapse to a count + open the picker on tap — "3 Projekte ausgewählt ▾" on mobile; the full pill list shows in the picker only. Desktop keeps the pill list inline.
  4. Whatever path: the container of the selector must respect max-width: 100% of the viewport at mobile breakpoint, no min-width: <wide>px, no white-space: nowrap causing overflow, no fixed-width inner ul.
  5. Confirm: no part of the /events filter row generates horizontal scroll at any mobile width down to 320px.

Files most likely touched

  • frontend/src/events.tsx / frontend/src/client/events.ts — filter row layout
  • frontend/src/client/filter-bar/axes.ts (if matters is a filter-bar axis)
  • A shared multi-select / project-picker component if one exists — search for matters, projects-select, projekt, projects-picker.
  • frontend/src/styles/global.css — mobile breakpoint rules for the selector

Hard rules

  • Zero horizontal scroll on mobile at /events. Verify with viewport widths 320, 375, 414, 768.
  • Don't break the desktop layout (the wide selector is fine on wide screens).
  • Don't lose existing multi-select / clear-selection / search functionality.
  • go build ./... && go test ./internal/... && cd frontend && bun run build clean.
  • Branch: mai/<worker>/events-mobile-scroll-fix.

Out of scope

  • A general mobile-responsiveness pass on every page (separate scope).
  • Replacing the matters selector with something completely different (e.g. tree-style picker) — pick the smallest change that kills the horizontal scroll.
  • Touch / swipe gestures unrelated to the dropdown.

Reporting

mai report completed with branch + SHAs + chosen approach (A/B/C) + screenshot-equivalent description of the mobile selector before/after (or actual Playwright screenshots if you grab them).

## m's report (2026-05-25 13:53) > On the main events page I have horizontal scrolling on mobile due to the matters selector dropdown's width. Generally sensible, but maybe we need to somehow allow linebreaks or have a different kind of selector? But I really dont want horizontal scrolling in mobile ## Scope `/events` page on a mobile viewport — the matters (projects) selector / multi-select dropdown is wider than the screen, forcing horizontal page scroll. m's hard rule: NO horizontal scrolling on mobile. ## What to do 1. Reproduce on mobile viewport (Playwright or DevTools mobile preview at ~375px width). Identify which component renders the matters selector — likely lives in `frontend/src/events.tsx` filter row or a shared `client/filter-bar/*.ts` axis component. 2. Audit whether the same selector lives elsewhere (Custom-View filter bar, /agenda, /inbox after the overhaul lands). Whatever fix lands should not regress other surfaces — but should also bring them along if they have the same problem. 3. Pick a fix from these options (coder's call; document the choice in commit message): - **A. Allow linebreaks** in the selected-pills list inside the trigger — the trigger grows in height instead of width on mobile. Multi-line trigger + collapse to single line on desktop. - **B. Switch to a different selector pattern on mobile** — e.g. a bottom-sheet drawer (tap selector → drawer slides up with the full project tree), or a full-screen modal picker. - **C. Collapse to a count + open the picker on tap** — "3 Projekte ausgewählt ▾" on mobile; the full pill list shows in the picker only. Desktop keeps the pill list inline. 4. Whatever path: the **container** of the selector must respect `max-width: 100%` of the viewport at mobile breakpoint, no `min-width: <wide>px`, no `white-space: nowrap` causing overflow, no fixed-width inner ul. 5. Confirm: no part of the /events filter row generates horizontal scroll at any mobile width down to 320px. ## Files most likely touched - `frontend/src/events.tsx` / `frontend/src/client/events.ts` — filter row layout - `frontend/src/client/filter-bar/axes.ts` (if matters is a filter-bar axis) - A shared multi-select / project-picker component if one exists — search for `matters`, `projects-select`, `projekt`, `projects-picker`. - `frontend/src/styles/global.css` — mobile breakpoint rules for the selector ## Hard rules - **Zero horizontal scroll on mobile at /events.** Verify with viewport widths 320, 375, 414, 768. - Don't break the desktop layout (the wide selector is fine on wide screens). - Don't lose existing multi-select / clear-selection / search functionality. - `go build ./... && go test ./internal/... && cd frontend && bun run build` clean. - Branch: `mai/<worker>/events-mobile-scroll-fix`. ## Out of scope - A general mobile-responsiveness pass on every page (separate scope). - Replacing the matters selector with something completely different (e.g. tree-style picker) — pick the smallest change that kills the horizontal scroll. - Touch / swipe gestures unrelated to the dropdown. ## Reporting `mai report completed` with branch + SHAs + chosen approach (A/B/C) + screenshot-equivalent description of the mobile selector before/after (or actual Playwright screenshots if you grab them).
mAi self-assigned this 2026-05-25 11:54:38 +00:00
mAi commented 2026-05-25 12:09:10 +00:00
Author
Collaborator
Copy Link

Fix shipped

Approach: A — Let the matters selector respect its container at every viewport width.

Root cause: a native <select> sizes itself to the widest <option> text. The existing 480px media query forced width: 100% on phones, but the 481–1000px range (tablet portrait, landscape phones) had no constraint at all and inherited the intrinsic select width. With long project titles like HLC-MUC-2024-007 — Bayer Pharma AG ./. Genentech, Inc. — EP 3 patent infringement and validity proceedings — Munich Local Division — UPC_CFI_007/2024, the select grew to 1034px on a 768px viewport.

Fix in frontend/src/styles/global.css (13 lines, +2 inline comments):

.filter-group {
    ...
    min-width: 0;
    max-width: 100%;
}

.entity-select {
    ...
    max-width: 100%;
    min-width: 0;
}

Why this works: max-width: 100% caps the cell at its flex container; min-width: 0 lets it shrink below content size inside that flex layout. Together they keep the select inside the viewport at every width.

Verification

Playwright at all four required widths after the build:

Viewport docWidth Overflow
320 px 320 none
375 px 375 none
414 px 414 none
768 px 768 none

Desktop (1280px) still lays out all four filter-groups in one row (status 173, project 282, event-type 192, appointment-type 148 px wide). Only when content is pathologically wide does the affected cell wrap onto its own line — the alternative (overflow scroll) is what we are killing.

Gates:

  • go build ./... — clean
  • go test ./internal/... -short — all green
  • cd frontend && bun run build — clean

Why not approach B/C

  • B (mobile drawer) — over-engineered for the native <select>. Browsers already render the open state as a native sheet on mobile.
  • C (collapse to count) — the project filter is single-select today; there is no count to collapse. Was already implemented for the event-type multi-trigger (N ausgewählt).

Files

  • frontend/src/styles/global.css (only file touched)

Applies to both /events and the Custom Views filter bar (filter-bar-group / filter-bar-select extend filter-group / entity-select).

Branch + SHA

  • Branch: mai/demeter/gitster-events
  • Commit: 716f6d7ece
## Fix shipped **Approach: A** — Let the matters selector respect its container at every viewport width. Root cause: a native `<select>` sizes itself to the widest `<option>` text. The existing 480px media query forced `width: 100%` on phones, but the **481–1000px range** (tablet portrait, landscape phones) had no constraint at all and inherited the intrinsic select width. With long project titles like `HLC-MUC-2024-007 — Bayer Pharma AG ./. Genentech, Inc. — EP 3 patent infringement and validity proceedings — Munich Local Division — UPC_CFI_007/2024`, the select grew to 1034px on a 768px viewport. Fix in `frontend/src/styles/global.css` (13 lines, +2 inline comments): ```css .filter-group { ... min-width: 0; max-width: 100%; } .entity-select { ... max-width: 100%; min-width: 0; } ``` Why this works: `max-width: 100%` caps the cell at its flex container; `min-width: 0` lets it shrink below content size inside that flex layout. Together they keep the select inside the viewport at every width. ## Verification Playwright at all four required widths after the build: | Viewport | docWidth | Overflow | |----------|----------|----------| | 320 px | 320 | none | | 375 px | 375 | none | | 414 px | 414 | none | | 768 px | 768 | none | Desktop (1280px) still lays out all four filter-groups in one row (status 173, project 282, event-type 192, appointment-type 148 px wide). Only when content is pathologically wide does the affected cell wrap onto its own line — the alternative (overflow scroll) is what we are killing. Gates: - `go build ./...` — clean - `go test ./internal/... -short` — all green - `cd frontend && bun run build` — clean ## Why not approach B/C - **B (mobile drawer)** — over-engineered for the native `<select>`. Browsers already render the open state as a native sheet on mobile. - **C (collapse to count)** — the project filter is single-select today; there is no count to collapse. Was already implemented for the event-type multi-trigger (`N ausgewählt`). ## Files - `frontend/src/styles/global.css` (only file touched) Applies to both `/events` and the Custom Views filter bar (`filter-bar-group` / `filter-bar-select` extend `filter-group` / `entity-select`). ## Branch + SHA - Branch: `mai/demeter/gitster-events` - Commit: [`716f6d7ece`](https://mgit.msbls.de/m/paliad/commit/716f6d7ece151b7c564de9852b0e0893e2cc1020)
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
deferred
Parked — not pursuing now, may un-park later
done
Work completed by an agent; awaiting m to close
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/paliad#86
No description provided.
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?