Fixed Links and code section overflow in API Documentation pages #8841
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #8841 +/- ##
==========================================
- Coverage 16.28% 16.02% -0.27%
==========================================
Files 87 89 +2
Lines 4618 4693 +75
Branches 805 818 +13
==========================================
Hits 752 752
- Misses 3371 3434 +63
- Partials 495 507 +12 ☔ View full report in Codecov by Sentry. |
mekarpeles
added
the
On testing.openlibrary.org
static/css/layout/index.less
Outdated
| @@ -15,6 +15,9 @@ div#contentBody { | |||
| img { | |||
| max-width: 100%; | |||
| } | |||
| p { | |||
There was a problem hiding this comment.
This may apply to more cases than we want, a better solution may be to do overflow-x: auto on the specific elements causing the issue, e.g. pre tags.
There was a problem hiding this comment.
@mekarpeles this issue effects links, code and text as well (which I noticed later) present in the page. The text present in the page is only wrapped around p tag, so applying word-wrap: break-word property will solve the overflow issue for links, code and text as well.
using overflow-x: auto will introduce a scroll bar for the elements that are overflowing, a behavior that we may not want.
There was a problem hiding this comment.
For code blocks (<pre>), the scroll bar is preferable to wrapping 👍 Adding a rule specifically for anchors to allow word-wrap: break-word seems reasonable! Those two rules should handle all the cases. Although it is technically possible to have text that is very long, it doesn't really happen often in reality.
mekarpeles
added
Needs: Submitter Input
|
As mentioned by @cdrini updated the |
scottbarnes
added
On testing.openlibrary.org
…ernetarchive#8841) * Fixed text overflow in API Documentation pages by adding word-warp property * updated pre tag to fix overflow issue in code section
…ernetarchive#8841) * Fixed text overflow in API Documentation pages by adding word-warp property * updated pre tag to fix overflow issue in code section
jimchamp
removed
the
On testing.openlibrary.org
Closes #8839
Fixed Links and code section overflow in API Documentation pages.
Technical
Added
word-wrap: break-wordproperty todiv#contentBodyto solve the issue.Testing
Screenshot
Stakeholders
@jimchamp