Skip to content

report: prevent breaking words in opportunity text #14329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
devtools-bot merged 3 commits into from
Aug 31, 2022
Merged

report: prevent breaking words in opportunity text #14329

devtools-bot merged 3 commits into from
Aug 31, 2022

Conversation

@adamraine
Copy link
Contributor

@adamraine adamraine commented Aug 29, 2022

Fixes #14326

@adamraine adamraine requested a review from a team as a code owner August 29, 2022 20:35
@adamraine adamraine requested review from connorjclark and removed request for a team August 29, 2022 20:35
@paulirish
Copy link
Member

paulirish commented Aug 29, 2022

weirdest thing. i also made a branch for this today.

slightly diff impl:
image

will review later…

@brendankenny
Copy link
Contributor

brendankenny commented Aug 29, 2022

Separate from the formatting: do we prefer s over sec? sec seems kind of weird to me as an abbreviation, honestly

@brendankenny
Copy link
Contributor

brendankenny commented Aug 29, 2022 •
edited by paulirish
Loading

Separate from the formatting: do we prefer s over sec? sec seems kind of weird to me as an abbreviation, honestly

we can switch from unitDisplay: 'short' to unitDisplay: 'narrow' to get 's' here, but then 0.150 s becomes 0.15s (no space, breaking or otherwise, before 's'). Kind of annoying but fine?

alexnj
alexnj reviewed Aug 29, 2022
View reviewed changes
report/assets/styles.css

.lh-audit--load-opportunity .lh-audit__display-text {
text-align: right;
flex: 0 0 calc(3 * var(--report-font-size));
Copy link
Member

@alexnj alexnj Aug 29, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

This one potentially has the side effect of the right end of spark lines being misaligned between opportunities (without a fixed and reserved space for each) vs. bumping to 4 *?

Copy link
Member

@alexnj alexnj Aug 29, 2022

Choose a reason for hiding this comment

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

image

Copy link
Contributor Author

@adamraine adamraine Aug 29, 2022

Choose a reason for hiding this comment

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

Yeah good point, that's probably why this line was here in the first place. Bumping to 4 * is probably best and then paul's suggestion just so a potential break doesn't happen in the middle of the word.

@devtools-bot devtools-bot merged commit 25b0304 into master Aug 31, 2022
@devtools-bot devtools-bot deleted the report-prvent-word-break branch August 31, 2022 18:42
@adamraine adamraine mentioned this pull request Aug 31, 2022
Closed
@brendankenny brendankenny mentioned this pull request Dec 16, 2022
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@alexnj alexnj alexnj approved these changes

@connorjclark connorjclark Awaiting requested review from connorjclark connorjclark was automatically assigned from GoogleChrome/lighthouse-hackers

Assignees

@connorjclark connorjclark

Labels

waiting4reviewer

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

report: line breaks in the middle of the 'sec' unit in opportunities

6 participants

@adamraine @paulirish @brendankenny @alexnj @connorjclark @devtools-bot