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(code-snippet): scrollbar not clickable on muliline #12605

Merged
merged 2 commits into from
Nov 28, 2022
Merged

fix(code-snippet): scrollbar not clickable on muliline #12605

merged 2 commits into from
Nov 28, 2022

Conversation

alisonjoseph
Copy link
Member

@alisonjoseph alisonjoseph commented Nov 11, 2022

closes #9946

Scrollbar wasn't clickable when there was an overflow on the multiline code snippet because the overflow-indicator-right div was being rendered to sit directly on top of it. This removes that div and adds the overflow gradient to the pre:after element instead.

Changelog

New

  • add class for multiline when hasRightOverflow is true
  • update styles for overflow gradient to show up on after element of pre to not interfere with scrollbar

Changed

  • Only render overflow-indicator-right div for single line code snippet

Testing / Reviewing

Make sure you can scroll with the mouse all directions in multiline codesnippet and that the gradient shows up correctly. Check that single line didn't change at all.

Test with scrollbars on and off in your system settings.
Screenshot 2022-11-11 at 1 16 19 PM

@alisonjoseph alisonjoseph marked this pull request as ready for review November 11, 2022 19:16
@alisonjoseph alisonjoseph requested a review from a team as a code owner November 11, 2022 19:16
@netlify
Copy link

netlify bot commented Nov 11, 2022

Deploy Preview for carbon-components-react ready!

Name Link
🔨 Latest commit 4d099d3
🔍 Latest deploy log https://app.netlify.com/sites/carbon-components-react/deploys/636e9ea86fc042000aa07380
😎 Deploy Preview https://deploy-preview-12605--carbon-components-react.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 site settings.

@netlify
Copy link

netlify bot commented Nov 11, 2022

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 4d099d3
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/636e9ea84b113a000896bb28
😎 Deploy Preview https://deploy-preview-12605--carbon-elements.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 site settings.

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

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

Awesome! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Overflow indicator is hiding scrollbar in CodeSnippet
3 participants