Skip to content

Fix for overflow scrolling issue #2275

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

Merged
merged 1 commit into from
May 19, 2025
Merged

Fix for overflow scrolling issue #2275

merged 1 commit into from
May 19, 2025

Conversation

tylersticka
Copy link
Member

@tylersticka tylersticka commented May 15, 2025

Overview

Addresses an issue where code blocks in comments could break the page's horizontal scroll.

Screenshots

Before, you can scroll the document horizontally as far as the overflow content, even though it's clipped by the <pre> element. After, horizontal scrolling is only applied to the <pre>.

Before After
cloudfour com_thinks_css-circles_(iPhone SE) cloudfour com_thinks_css-circles_(iPhone SE) (1)

Testing

I tried, I really tried, to add a test story to this repository. But because the issue's only symptomatic in a comment thread when the syntax-highlighting-code-block is applied within a full page, it was going to take me a lot more time to recreate in a story.

You can recreate the fix by visiting https://cloudfour.com/thinks/css-circles/#comment-6111 in a Chromium browser, resizing to a narrow width, inspecting the <pre> element, and applying position: relative to the existing pre block of styles.

Other than that, a review of existing <pre> patterns on the deploy preview seems like a good idea. That includes:


Copy link

changeset-bot bot commented May 15, 2025

🦋 Changeset detected

Latest commit: d0f8b67

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@cloudfour/patterns Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented May 15, 2025

Deploy Preview for cloudfour-patterns ready!

Name Link
🔨 Latest commit d0f8b67
🔍 Latest deploy log https://app.netlify.com/projects/cloudfour-patterns/deploys/682657d68cfe850008401d35
😎 Deploy Preview https://deploy-preview-2275--cloudfour-patterns.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@tylersticka tylersticka marked this pull request as ready for review May 15, 2025 21:17
@tylersticka tylersticka requested a review from a team May 15, 2025 21:17
@tylersticka tylersticka merged commit 6c45f6e into main May 19, 2025
10 checks passed
@tylersticka tylersticka deleted the fix/code-block-overflow branch May 19, 2025 16:57
@github-actions github-actions bot mentioned this pull request May 19, 2025
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.

Code blocks in comments can trigger a horizontal scroll
2 participants