React: Code Snippet single line text shifted upward

[jeff-arn]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.

When using the CodeSnippet component in single line mode, a horizontal scroll bar will render, which shifts the <pre> wrapped code upward so that it is not centered.

Behavior observed in Storybook

Is this issue related to a specific component?

This is related to CodeSnippet when the type prop is set to single.

What did you expect to happen? What happened instead? What would you like to
see changed?

I expected to see the code centered as it is when the text width does not exceed the container. Instead, the text shifted upwards, possibly offset by the scrollbar.

What browser are you working in?

This behavior was observed in:

• Chrome 79.0.3945.130
• Safari 13.0.3 (15608.3.10.1.4)
• Firefox 72.0.1

What version of the Carbon Design System are you using?

This is Carbon 10 design system, with the 7.9.0 version of carbon-components-react

Steps to reproduce the issue

1. Create a <CodeSnippet type="single" /> component
2. Provide child text that is long enough to exceed the width of the component
3. Observe a horizontal scroll bar render and offset the Y position of the text so that it is no longer centered.

Please create a reduced test case in CodeSandbox

Reproducible demo here: https://codesandbox.io/s/musing-surf-1jyot

Additionally, this is observable in the public Storybook example: http://react.carbondesignsystem.com/?path=/story/codesnippet--single-line

[emyarod]

we're currently exploring solutions for this (ref #2304 (comment))

[jeff-arn]

@emyarod great news! Btw the POC in that thread you posted looks great!