break long words to prevent horizontal scroll

[darricheng]

Came across this crate with a description that was overflowing and breaking the layout:

For this specific crate description, it only breaks the layout on Safari or Chrome related browsers as Firefox breaks long words on slashes as well. A long word would break the layout on any browser, but I think that kind of case would be rarer. This CSS change breaks the word if they get too long, so that the layout doesn't break.

There's a few other CSS options that could resolve this as detailed in css-tricks, but I thought this one was the most effective and minimal change to resolve this.

[GuillaumeGomez]

Fix looks good to me, thanks! Please add a GUI regression test (don't hesitate to ask if you need help).

[darricheng]

@GuillaumeGomez I added an initial test based on my interpretation of the docs. However, I'm not certain it's correct mainly because I'm not sure how to go about validating the test (run it pre and post fix, that the test file syntax is actually valid, etc.). The test itself takes >15mins with github actions.

I'm curious how you guys do it? E.g. do you run it locally or rely on github actions? Or maybe some other way?

[darricheng]

To follow up on the previous comment, I can see the failure in the test. I'm more curious as to the workflow you guys use because the feedback loop is long in the case of the gui tests.

[GuillaumeGomez]

I run them directly without docker (because it takes too much time).

[darricheng]

@GuillaumeGomez I think I figured it out. Do correct me if I'm wrong.

As per the README, running node gui-tests/tester.js opens docs.rs at http://127.0.0.1:3000. As long as we have a docs.rs server running on that localhost port, with or without docker, the tests will correctly check against the running server. Doing it as such is indeed very fast like you mentioned.

[GuillaumeGomez]

Looks great, thanks a lot!