Skip to content

LG-15303: Improve layout of step indicator at high text zoom levels#11758

Merged
matthinz merged 1 commit intomainfrom
matthinz/15303-step-indicator-text-zoom
Jan 17, 2025
Merged

LG-15303: Improve layout of step indicator at high text zoom levels#11758
matthinz merged 1 commit intomainfrom
matthinz/15303-step-indicator-text-zoom

Conversation

@matthinz
Copy link
Contributor

@matthinz matthinz commented Jan 16, 2025

🎫 Ticket

Link to the relevant ticket:
LG-15303

🛠 Summary of changes

When the browser's text zoom level is very high, the step indicator steps can become very crowded.

This commit adds a min-width to individual steps that is based on the root font size to prevent this issue.

👀 Screenshots

Google Chrome (Android)
100% text zoom
Before After

before_100

after_100

200% text zoom
Before After

before_200

after_200

250% text zoom
Before After

before_250

after_250

300% text zoom
Before After

before_300

after_300

Safari (iPhone)
100% text zoom
Before After

before_100

after_100

200% text zoom
Before After

before_200

after_200

300% text zoom
Before After

before_300

after_300

When the browser's text zoom level is very high, the step indicator steps can become very crowded.

This commit adds a min-width to individual steps that is based on the root font size to prevent this issue.

changelog: User-Facing Improvements, Accessibility, Improve step indicator legibility at high text zoom levels
@matthinz matthinz marked this pull request as ready for review January 17, 2025 00:45
@matthinz matthinz requested a review from a team January 17, 2025 00:45
Copy link
Contributor

@n1zyy n1zyy left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And look at that delightful lack of the word "content" (from "Skip to main content") covering the text at high zoom levels! 😊

Giving this an approval because it's a clean solution that works, but I understand you may experiment further.

@matthinz
Copy link
Contributor Author

I'm gonna land based on this testing--I've got a 👍 from design.

@matthinz matthinz merged commit 58ccf84 into main Jan 17, 2025
@matthinz matthinz deleted the matthinz/15303-step-indicator-text-zoom branch January 17, 2025 16:44
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.

2 participants