Fix product title overflow overlapping discussion section#512
Merged
Conversation
Long unbroken product names (e.g. underscore-separated slugs like Picarx_voice_keyboard_controlled_assistant) had no space for the browser to wrap on, so the title overflowed its container and visually overlapped the Discussion sidebar. Add min-w-0 to the grid column and title container so they can shrink, and break-words on the h1 so long unbroken strings wrap instead of overflowing. Closes a11yhood#302
Contributor
|
I noticed that this works with spaces, and with underscores, but not unbroken words. |
DhruvN102
pushed a commit
to DhruvN102/a11yhood.github.io
that referenced
this pull request
Jul 22, 2026
The h1 title already wrapped unbroken words correctly (min-w-0 +
break-words), but the "Image unavailable for {name}" fallback text
shown when a product has no image was a flex child with no wrapping
treatment at all, so a genuinely unbroken product name (no spaces,
no underscores) overflowed its 300px box entirely instead of
wrapping. Add min-w-0 + break-words to that span too.
Verified with real rendered output: a 79-character unbroken word
title now wraps cleanly in both the heading and the image-fallback
text instead of overflowing.
Addresses review feedback on a11yhood#512 (issue a11yhood#302).
DhruvN102
force-pushed
the
fix/product-title-overflow
branch
from
July 22, 2026 18:28
19f18a4 to
4a6d0b5
Compare
Author
I have pushed my changes addressing this issue. Could you please let me know if everything looks good now? |
jmankoff
approved these changes
Jul 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What does this Pull Request do?
Fixes a layout bug where long, unbroken product titles (e.g. underscore-separated names like "Picarx_voice_keyboard_controlled_assistant") overflow their container and visually overlap the Discussion sidebar on the product detail page.
Why?
Fixes issue #302. Long titles with no spaces are treated as a single unbreakable word by the browser, and without "min-w-0" on the grid/flex ancestors or an "overflow-wrap" rule on the title, it overflows its column and renders on top of the sidebar.
How was it tested?
"eslint" passes clean on the changed file.