Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Break long words only in blog posts #6944

Merged
merged 5 commits into from
Jul 31, 2024
Merged

Conversation

caminad
Copy link
Contributor

@caminad caminad commented Jul 24, 2024

Description

Change word-break: break-all; on narrow viewports only, to overflow-wrap: anywhere; on all viewport sizes. word-break: break-word; also works, but is deprecated (see note in the spec.) I could not find a suitable Tailwind utility; break-words produces overflow-wrap: break-word;, which does not prevent an overflow.

Validation

Navigate to /en/blog/vulnerability/april-2024-security-releases#assertion-failed-in-nodehttp2http2sessionhttp2session-leads-to-http2-server-crash-cve-2024-27983---high and check that all words are no longer broken. The page should not scroll horizontally.

Before (main) After (this branch)
Screen Shot 2024-07-24 at 14 43 27 Screen Shot 2024-07-24 at 14 43 41

Related Issues

Fixes #6943, related to #6711, related to #6721.

Check List

  • I have read the Contributing Guidelines and made commit messages that follow the guideline.
  • I have run npm run format to ensure the code follows the style guide.
  • I have run npm run test to check if all tests are passing.
  • I have run npx turbo build to check if the website builds without errors.
  • I've covered new added functionality with unit tests if necessary.

Signed-off-by: Camina <67751672+caminad@users.noreply.github.com>
@caminad caminad requested a review from a team as a code owner July 24, 2024 14:23
Copy link

vercel bot commented Jul 24, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
nodejs-org ✅ Ready (Inspect) Visit Preview Jul 31, 2024 0:52am

Signed-off-by: Camina <67751672+caminad@users.noreply.github.com>
Copy link
Collaborator

@bmuenzenmeyer bmuenzenmeyer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is a good improvement - thanks for your contribution!

apps/site/layouts/layouts.module.css Outdated Show resolved Hide resolved
Signed-off-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Copy link

github-actions bot commented Jul 31, 2024

Unit Test Coverage Report

Lines Statements Branches Functions
Coverage: 92%
90.67% (593/654) 76.08% (175/230) 94.57% (122/129)

Unit Test Report

Tests Skipped Failures Errors Time
131 0 💤 0 ❌ 0 🔥 5.182s ⏱️

Signed-off-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
Signed-off-by: Brian Muenzenmeyer <brian.muenzenmeyer@gmail.com>
@bmuenzenmeyer bmuenzenmeyer added the github_actions:pull-request Trigger Pull Request Checks label Jul 31, 2024
@github-actions github-actions bot removed the github_actions:pull-request Trigger Pull Request Checks label Jul 31, 2024
@bmuenzenmeyer bmuenzenmeyer added this pull request to the merge queue Jul 31, 2024
Merged via the queue into nodejs:main with commit c84b916 Jul 31, 2024
14 checks passed
@caminad caminad deleted the patch-1 branch August 7, 2024 09:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Broken words on narrow viewports make reading difficult
3 participants