Background / Goal
Coming from T406628, there are certain viewport configurations and item combinations where the design is not followed at the moment.
Viewports range causing items:
Between ~1050 and 1190px with 3 items
Items causing issues
Under three items saved.
Requirements
We've settled on the Card internals in layout and text clamping.
- 4 Cards limit per row, even on widest desktop
- Cards should auto-fill the space whenever possible on mobile, on tablet and desktop only when there's enough Cards (2 on tablet, 3 on desktop) available
- Codex gap of 16px must not widen, no matter with auto-filled rows
- Left align Cards always for best readability, no center alignment if number of cards < available space
We have
- 20rem (equal to 320px) as minimal Card width [was
22rem (equal to 352px)in earlier iteration, but iPhone's 375px viewport needed us to reduce slightly] and - 28rem (equal to 448px) as max Card width, alternatively
- 34rem (equal to 544px) as max mobile Card width
- 1fr equal to 100% to fill up the Grid row
Sizes follow, with min / max numbers in cells, I stay in px for simplicity
| Viewports: → | 320px <= Mobile >= 639px | 640px <= Tablet >= 1119px | 1120px <= Desktop >= 1679px | 1680px <= Desktop wide >= 1680px+ |
|---|---|---|---|---|
| Items in List: ↓ | ||||
| 1 | 100% / 544px | 352px / 544px | 352px / 448px | 352px / 448px |
| 2 | 1-2 per row: 320px / max1fr (100%~=639px), wrapped | 22rem 2 per row | 22rem | 22rem |
Developer notes
Best user experience with use of :has which is slightly less supported than display: grid, we need both in combination.
The support difference seems negligible though, see comment below.
QA notes
Given the selector behavior of :has featuring selectors, please ensure that you delete items from DOM and don't rely on display:none to test 1, 2, or 3 items. Instead duplicate an item/a card or delete/remove it with DOM inspector. Otherwise the rendering would mislead and not represent real rendering.
BDD
Feature: Responsive Reading Lists grid layout
Scenario: Viewing Reading List with different item counts
Given I open Special:ReadingLists
When the grid displays 1, 2, or 3 saved items at various viewport sizes
Then cards remain left-aligned
And grid gaps remain consistent at 16px
And the card layout auto-fills space according to the number of items and screen width
Scenario: Viewing Reading List with many items
Given I have 4 or more Reading List items
When the page is resized across viewport ranges
Then a maximum of 4 cards per row are displayed
And card alignment and spacing remain consistent across breakpointsTest Steps
Test Case 1: Verify responsive grid layout for 1–3 items
- Open Special:ReadingLists and ensure 1–3 cards are present (use DOM delete/duplicate for accuracy).
- Resize browser window through mobile, tablet, and desktop breakpoints.
- AC1: Cards remain left-aligned at all viewport widths.
- AC2: Cards auto-fill available width according to viewport size.
Test Case 2: Verify 4-card layout limit
- Ensure 4 or more cards exist in the Reading List.
- Resize browser window across all viewport ranges.
- AC4: No more than 4 cards appear per row.
- AC5: Alignment and spacing remain visually consistent across viewports.
QA Results - Beta|Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T407516#11356397 |
| 2 | ✅ | T407516#11356397 |
| 3 | ✅ | T407516#11356397 |
| 4 | ❌ | T407516#11356397 |
| 5 | ✅ | T407516#11356397 |
Acceptance criteria for done
- Left align in these causes instead of widening the gap
