report: fix audits DOM style

[tgfjt]

Hi! 😃

Summary

This PR fixes: some texts protruded from the box of runtime-settings.

screenshot:

Change

Add word-break: break-all into .lh-env__description .

screenshot:

example URL: https://www.amazon.co.jp/%E3%83%AF%E3%83%B3%E3%82%B9%E3%83%BB%E3%82%A2%E3%83%9D%E3%83%B3%E3%83%BB%E3%82%A2%E3%83%B3%E3%83%BB%E3%82%A2%E3%83%AB%E3%82%B4%E3%83%AA%E3%82%BA%E3%83%A0-%E7%89%A9%E8%AA%9E%E3%81%A7%E8%AA%AD%E3%81%BF%E8%A7%A3%E3%81%8F%E8%A8%88%E7%AE%97-Martin-Erwig/dp/4320124413/ref=sr_1_6?ie=UTF8&qid=1546476091&sr=8-6&keywords=martin+erwig

[patrickhulce]

thanks so much for the contribution @tgfjt! 😃

[exterkamp]

Love this, thanks for the contribution!

1 concern: This solution also cuts off all words in the env section.

Should we make a new class for just the env-url so that the other items don't break words?

1 idea: The top URL also does this, not sure if this is a problem we want to tackle in this PR, but its a thought.

The lh-metadata__results CSS was last edited a long time ago (#2000 according to blame)

.lh-metadata__results {
   text-overflow: ellipsis;
   white-space: nowrap;
}

[tgfjt]

@exterkamp
Thanks!
Exactly, we don't need to cut off all words of env__description.
I add is-url modifier to fix this.

1 idea: The top URL also does this, not sure if this is a problem we want to tackle in this PR, but its a thought.

Oh, Thank you for letting me know!
I think that's another issue. and I fix this case as another PR.:)
#6858

stale

[paulirish]

In the normal HTML report, word-wrap is set to break-word and everything looks good.

I can only see this being a problem in DevTools, because we have this style applied there: https://cs.chromium.org/chromium/src/third_party/blink/renderer/devtools/front_end/audits2/audits2Panel.css?l=36-38&rcl=1724b08640a4978ac975d71a2d499fc66a31ac5b

It was introduced here: https://chromium-review.googlesource.com/c/chromium/src/+/692625/ and I think we've dealt with regressions around word-wrap a few times.

I'll have to dig into why we do this in DevTools...

[tgfjt]

@paulirish
Ummm, I couldn't catch how word-wrap: normal; comes.
It's gonna be hard to make a decision. 🤔
Let's have a digging time!

old review, changes in #6858

[brendankenny]

Things are changing in the report (see #7752), so closing this. We'll keep these examples in mind for it.