Skip to content

fix(watchlist): make Upcoming one grid, with the time windows as a filter - #83

Merged
Isma-L154 merged 1 commit into
mainfrom
fix/upcoming-windows-as-filters
Sep 9, 2026
Merged

Isma-L154 merged 1 commit into
mainfrom
fix/upcoming-windows-as-filters

Conversation

@Isma-L154

Copy link
Copy Markdown
Owner

Closes #80. Closes #82.

The two bugs, and why they were the same bug

Upcoming rendered a separate grid per time window. Everything in #80 follows from that.

"Almost one movie per row." Measured with three series spread across three windows: three sections, one card each, three fifths of every row empty. That is the ordinary shape of a real list, not an edge case.

Overlapping titles and posters. The caption under each card overflowed its grid cell onto the next section's heading — measured at 23–39px. Root cause: MediaCard's <article> carries h-full, which exists so a row of cards stays level. A grid item stretches, so h-full resolves against a definite height and the card fills the cell exactly; the caption placed after it inside that same cell had nowhere to go. Every other tab is fine precisely because the card is the only child there.

So the fix for #82 is the fix for #80: remove the grouping, and Upcoming draws from the same grid as the rest of the list — which is acceptance criterion #1 of #80, met literally rather than by imitation.

The windows as a filter

This week · This month · Later · No date, as chips beside the type control.

  • Counts come from the same set the grid draws from, minus the window itself, so a chip reading "3" can never open onto an empty grid once the type or the search box has already narrowed things. Selecting TV drops the counts to All 3 / This week 1 / This month 1 / Later 1 and the now-empty "No date" chip disappears — same reasoning as an empty status tab.
  • The window is scoped to that tab. Left applied and carried to another tab it would silently empty a list that has nothing to do with release dates; it is ignored everywhere else, and cleared by "Clear filters".
  • Upcoming is always soonest-first and gives up the sort dropdown to make room. It is the tab about when; the grouped view it replaces imposed that order too, so no choice is taken away, and "Recently added" over a list of release dates answers nobody's question.

The caption is gone with the grouping

Nothing is lost that the card does not already say: the poster badge carries how soon (In 3 days), the action slot carries the verb and the date (Out Sep 11, Premieres Sep 15), a pending season shows as S4, and the full weekday date was always in the detail sheet.

Verified

  • npm run check — 0 errors, 0 warnings; npm run lint clean
  • 490 unit tests pass. Written test-first: the window predicate, the per-window counts, and the view filter — including that it is ignored on other tabs, composes with type and search, and defaults to everything pending when unset
  • 17 e2e pass
  • Driven in a real browser against a seeded list covering all four windows, at 1280px and 390px: 12 cards, 1 grid, 5 columns, 0 cells overflowing, 0 overlapping cards, chronological order, no horizontal scroll on mobile, no console errors. Every chip returns exactly its stated count. The old "one per row" case (3 series) is now one row of three.

One thing found along the way, not fixed here

playwright.config.ts sets reuseExistingServer: !process.env.CI. An unrelated Vite app was occupying port 5173 on this machine, so the whole suite silently ran against that app and reported 17/17 failures. It can equally hide a real failure behind someone else's server. Left alone here to keep this PR to the issues; recorded with evidence for #81.

…lter

Upcoming rendered a separate grid per time window, and both of its bugs
came from that.

A handful of pending titles spread across four windows became four rows
holding one card each — with three fifths of every row empty. That is the
ordinary case, not an edge case: three series in three windows is what a
real list looks like.

And the caption under each card overflowed its cell onto the next
heading. The card fills its cell by design — `h-full` is what keeps a row
of cards level — so a sibling placed after it inside the same grid item
has nowhere to go. Measured at 23-39px of overlap, which is why titles
and headings collided.

The windows are a filter now: This week / This month / Later / No date,
as chips beside the type control, with counts drawn from the same set the
grid draws from so a chip reading "3" can never open onto an empty grid.
An empty window is dropped, on the same reasoning as an empty status tab.
The tab is always ordered soonest-first and gives up the sort dropdown to
make room — it is the tab about *when*, the grouped view it replaces
imposed that order too, and "Recently added" over a list of release dates
answers nobody's question.

With the grouping gone, Upcoming draws from the same grid as every other
tab and the caption goes with it. Nothing is lost that the card does not
already say: the poster badge carries how soon, the action slot carries
the verb and the date, and the full weekday date was always in the detail
sheet.
@Isma-L154
Isma-L154 merged commit 1072dcb into main Sep 9, 2026
3 checks passed
@Isma-L154
Isma-L154 deleted the fix/upcoming-windows-as-filters branch September 9, 2026 02:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Fix UI/UX 'Upcoming' fix: broken grid layout and overlapping elements in "Upcoming" section

1 participant