Long strings are making the mobile view (and sometimes desktop) of lists expand beyond where they should.

Evidence / Screenshot (if possible)

Relevant url?

https://openlibrary.org/people/raybb/lists/OL195245L/Books_about_Open_Source
https://openlibrary.org/people/raybb/lists
https://openlibrary.org/works/OL8193508W/Alice's_Adventures_in_Wonderland/lists
It also happens on the "edit list" page in the preview of the description (see screenshot 4)

Steps to Reproduce

1. Go to the pages on a mobile device

• Actual: Long string caused the page to get wider
• Expected: Long string wraps

Details

• Logged in (Y/N)? y
• Browser type/version? FF/Chrome
• Operating system? Mac
• Environment (prod/dev/local)? prod

Proposal & Constraints

We can add overflow-wrap: break-word; to the mybooks-list class, which is present on the first three pages.

We could also add it to the wmd-preview but that file has a note saying not to add new markdown there. I'm not sure where else it would be added.

Related files

https://github.com/internetarchive/openlibrary/blob/master/static/css/components/mybooks-list.less
https://github.com/internetarchive/openlibrary/blob/master/static/css/legacy-wmd.less

Stakeholders