CodeSnippet focus indicator looks broken

[snrubnomis]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Describe in detail the issue you're having.
The CodeSnippet focus indicator has some issues:

• The outline doesn't match other focus indicators in Carbon
• When the content is not long enough to cause horizontal scrolling, the focus indicator goes below the field
• The focus indicator cutting through the field rather than going to the left and right edges makes it look broken

Is this issue related to a specific component?

CodeSnippet

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

A focus indicator that matches other Carbon components in style and that neatly surrounds the component rather than cutting through it or hanging down below.

What browser are you working in?

Chrome, Firefox, Safari, Edge, IE11

What version of the Carbon Design System are you using?

carbon-components: 10.9.3
carbon-components-react: 7.9.3

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?

Steps to reproduce the issue

1. Use a single line code snippet
2. Click to focus
3. See ugly focus indicator

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

You can see most of the issues in the storybook. You would need to shorten the content to see it without the scroll bar.

Additional information

• Screenshots or code
• Notes

[laurenmrice]

This should be fixed with this merged pr in the next release: #5233