Page MenuHomePhabricator

[Mobile Reading list] Saved pages cards adjustments for one column view in smaller viewports
Open, HighPublic2 Estimated Story Points

Assigned To
None
Authored By
Sneha
Nov 24 2025, 4:58 PM
Referenced Files
F70629612: Screenshot 2025-11-24 at 6.33.39 PM.png
Nov 24 2025, 11:39 PM
F70621636: Article.png
Nov 24 2025, 7:05 PM
F70621630: Article.png
Nov 24 2025, 7:05 PM
F70620808: Article.png
Nov 24 2025, 7:03 PM
F70611188: Article.png
Nov 24 2025, 6:00 PM

Description

Background

We need to ensure that the saved pages layout we built for Desktop experiment works well on small screens and Minerva. After several design explorations we have decided to maintain the card view across various viewports with adjustments to how content within the card is displayed in one-column view for smaller screens.

User Story

As a reader on mobile web, I want to all of my saved articles to be easy to browse and read on a small screen so that I can quickly find what I saved.

As a team developing this feature, we want the mobile layout to be consistent with Desktop design so that the codebase stays maintainable and web user experience remains familiar.

Design
Article.png (773×384 px, 122 KB)
Article.png (773×384 px, 48 KB)
Link to Figma
Requirements
  • For viewports smaller than 450ish adjust the card layout as specified in the design
    • Reduce the thumbnail size
    • Introduce the padding around the thumbnail
    • Reduce the title font size
  • The page title matches the design on Minerva
  • The copy indicating sort is in the right location on Minerva
  • The empty state when no items on the page

Event Timeline

bwang triaged this task as High priority.Nov 24 2025, 6:51 PM

Screenshot 2025-11-24 at 6.33.39 PM.png (1×1 px, 352 KB)

@Sneha For the Vector 2022 layout changes, is it just adding the padding around the images in the cards? and does not include changes to the header? (above "Saved")

For Minerva +2 card layout, the changes are just moving the "Sorted by Most Recent" text to the top right?

In Minerva, padding around the images is only in the 1 column layout? and reduce the thumbnail and title font size only for the 1 column layout? (smaller than 450ish)

@aude

For the Vector 2022 layout changes, is it just adding the padding around the images in the cards? and does not include changes to the header? (above "Saved")

Yeah no changes to the header on vector. And the padding around images and title font size changes are only for very narrow viewports less than 450ish (we can adjust this number later if needed)

For Minerva +2 card layout, the changes are just moving the "Sorted by Most Recent" text to the top right?

Yea for Minerva the "Saved pages" font and size is different and the sort copy is on the top right. Although I am not sure if having it on the same line will work with translations and so feel free to move it below the title "Saved pages" (for viewports under 450) if it looks cramped with translations.

In Minerva, padding around the images is only in the 1 column layout? and reduce the thumbnail and title font size only for the 1 column layout? (smaller than 450ish)

Yes only for 1 column layouts under 450ish viewport width. If we have space for more than 1 column we will have enough space to show the card as is.

Jdlrobson-WMF set the point value for this task to 2.Dec 2 2025, 5:06 PM