Page MenuHomePhabricator

Logged-in readers Design review: Nice to fix (P2) items
Open, LowPublic2 Estimated Story Points

Description

These items are not a blocker for QA or release

For the logged-in reader user story, fix the following issues with Fonts, Truncation, and padding from the Design review punchlist, and update Status (Engineer) column in the doc

  • 3 Decrease bottom padding of modules
  • 4 Decrease padding between bars in read this month chart
  • 5 <Username's reading> pulling incorrect token
  • 6 SF symbols do not match styling of module headers
  • 8 Bottom padding beneath border is > 16px
  • 9 Category name truncating after one line
  • 12 White border around article images/ +# overflow in Saved this month
  • 13 overflow article number in Saved this month pulling wrong token

Event Timeline

HNordeenWMF updated the task description. (Show Details)
HNordeenWMF moved this task from Backlog to P2 (Sprint After Next) on the Activity Tab on iOS board.
HNordeenWMF updated the task description. (Show Details)
HNordeenWMF renamed this task from Design review: Nice to fix (P2) items to Logged-in readers Design review: Nice to fix (P2) items.Nov 5 2025, 9:43 PM
Tsevener set the point value for this task to 2.Thu, Nov 6, 3:51 PM

@GOlson-WMF thanks for the fixes! I checked off the ones that were resolved, but some notes on the ones that weren't:

3- the bars should be 16px from the right and the bottom of the module. currently they seem to be leaning into the right and floating above the bottom, leaving >16 below them.

6- two of these were fixed — the categories one is not yet matching however.

8- i'm still seeing this issue

13- still seeing this issue

3 - adjusted, not entirely able to adjust hugely due to constraints with Charts.
6 - fixed!
8 - I think this is the built in padding of the text element - you're seeing extra spacing because it's not directly from the bottom of the visual letter elements I believe - the code has it set for 16 spacing at least.

VStack(alignment: .leading, spacing: 16) {
    Text(category)
        .foregroundStyle(Color(theme.text))
        .font(Font(WMFFont.for(.callout)))
        .lineLimit(2)
        .padding(0)

    if index < categories.count - 1 {
        Divider()
            .padding(0)
    }
}

13 - Updated to be semibold

Simulator Screenshot - iPhone 16 Plus - 2025-11-24 at 15.12.24.png (2×1 px, 582 KB)

Simulator Screenshot - iPhone 16 Plus - 2025-11-24 at 15.12.36.png (2×1 px, 546 KB)

Simulator Screenshot - iPhone 16 Plus - 2025-11-24 at 15.12.19.png (2×1 px, 631 KB)

@SChekfa-WMF here's some screenshots and will move this along board as needed, if you want to talk further about #3 or #8 let me know! Thanks :)

thanks Grey! this all looks great, the only one that seems to be off is 8 — are we sure the type token here is pulling Callout/Regular, as noted in the spec? that might be the issue here, as there's not really much extra line height attached to that token.

i'm also seeing that the fixes you implemented might have affected the borders between the categories — the border between the second and third category is now much fainter than the border between the first and second — can we please ensure that they are both at 1px pulling gray200? TY @GOlson-WMF

@SChekfa-WMF The latest updates on this one will be in Wikipedia 7.8.7 (5896).

ABorbaWMF subscribed.

Looks good to me on 7.8.7 (5896). Tested on iPhone 16 on iOS 26, iPad Pro on iPadOS 26, and iPhone 11 on iOS 18.