Closed benalleng closed 5 months ago
components/item.module.css (2)
`93-93`: The addition of `word-break: break-word;` to the `.other` class is a suitable fix for preventing text overflow on mobile devices. --- `160-160`: The addition of `word-break: break-word;` to the `.main` class effectively addresses the overflow issue, enhancing the user experience on mobile devices.
Description
Closes #1125 adds an explicit word break to the main and other item components to handle the text of long titles. Firefox handles this break by default but it seems that chrome and safari do not
Screenshots
chrome linebreak (note the
break-all
behavior in the url where the rest of the title hasbreak-word
)firefox linebreak (no change from prod)
Additional Context
This bit of css seems to only be necessary for chrome or safari based browsers as firefox seems to already have some default line-breaks built for slash characters. however, since I cannot explicitly state to make a linebreak on a "/" I opted to add
word-break: break-word;
instead. as a result the word breaks on firefox <-> chrome look slightly differentChecklist
Are your changes backwards compatible? Please answer below:
Yaaasss
Did you QA this? Could we deploy this straight to production? Please answer below:
Yaaasss
For frontend changes: Tested on mobile? Please answer below:
Tested in firefox and chrome, not on safari