Automattic / Automattic/pocket-casts-android

Various UI issues when the device uses the largest font and display settings

Open
#28 1 comment 0 reactions 0 assignees View on GitHub
[Type] Enhancement Good First Issue Migrated
Dominant language
Kotlin
Stars
2.8k
Forks
308
Avg merge
1d 10h
Merged PRs (30d)
187

Description

I was bouncing around the app with my Pixel 3 phone with the devices font size and the display size set to the maximum values, and I noticed a few UI issues, so I figured I'd open this issue to log them somewhere.

-------------------------
1. Help & Feedback Screen has a bit of horizontal scroll

https://user-images.githubusercontent.com/4656348/166716111-345c63a5-e74e-4550-96c7-45eb4b544c08.mp4

2. Help & Feedback "Still stuck..." box cuts words in half

The word feedback is split in two in the "Still stuck..." dialog

![image](https://user-images.githubusercontent.com/4656348/166716345-ba96713d-3f88-4b58-a86d-9b16470b930d.png)

3. Help & Feedback "Get in touch popup" has buttons outside the popup

4. Not all toolbars reflect the updated font size

It looks like our non-compose toolbars aren't reflecting the font size as much as the compose toolbars do. This can be seen when switching between the Settings and the About screens.

Font Size | Default | Largest
--- | --- | ---
Settings | ![image](https://user-images.githubusercontent.com/4656348/166718173-2a8931a5-ce95-4f7f-aac2-5269b6b9c8fb.png) | ![image](https://user-images.githubusercontent.com/4656348/166717912-a8e82afb-7312-40f3-bc6e-734d2ca6b10b.png)
About | ![image](https://user-images.githubusercontent.com/4656348/166718101-e22e035d-e258-47cd-9d95-01a1d8345ce5.png) | ![image](https://user-images.githubusercontent.com/4656348/166718037-853fd3a7-d58c-48e9-a0ef-804b6cde2145.png)

5. Profile's Active Account section loses its top and bottom padding

![image](https://user-images.githubusercontent.com/4656348/166718712-26cd00a5-a391-471f-99a4-81313351995e.png)

6. Podcast page's folder icon feels a bit crowded against the podcast picture

The spacing between the icons on the podcast page feels off to me because the folder icon crowds up to the podcast picture.

![image](https://user-images.githubusercontent.com/4656348/166719102-c9cf6fa2-c8d4-4692-9930-1fe18fafcf0c.png)

7. The Choose Folder Color screen's colors crowd the right side of the screen

![image](https://user-images.githubusercontent.com/4656348/166719489-26e4a62d-0b76-4808-b8b8-a082eb4d32e7.png)

Contributor guide

Open the contributing guide

Research direction

Reproduce the report on a Pixel 3 with the largest font and display settings, then inspect the Help & Feedback, Settings, About, Profile, Podcast, and Choose Folder Color screens. Done means the reported horizontal scrolling, toolbar sizing, spacing, padding, and crowding issues no longer occur at those settings.

Written by the indexing model from the issue text.

Assessment

Tech stack
kotlin
Domain
mobile
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.