Web-App: CodeSnippet styling issues

[francinelucca]

Description

• CodeSnippet usage along with text in a paragraph is overlapping eachother

• CodeSnippet is overflowing content in small sized screens
  

• Inline CodeSnippet size is off
  https://next-test.carbondesignsystem.com/libraries/carbon-react/latest/pages/tutorial/step-1
  

Steps to reproduce

https://next-test.carbondesignsystem.com/libraries/carbon-react/latest/pages/tutorial/step-1
https://next-test.carbondesignsystem.com/common-mdx-errors

1. Drop these contents into a test.mdx file in services/web-app/pages

Inline styles Inline styles in the form of string: `style="padding-top: 20px; color: red"` instead
  of javascript objects: `style={{paddingTop: '20px', color: 'red'}}` will result in a Component not
  rendering error.

2. Navigate to http://localhost/test
3. Make screen size width 320

Note: you can also reproduce this in a *.js file:

  <div>
              Inline styles in the form of string:{' '}
              <CodeSnippet type="inline">{'style="padding-top: 20px; color: red"'}</CodeSnippet>{' '}
              instead of javascript objects:
              <CodeSnippet type="inline">
                {"style={{ paddingTop: '20px', color: 'red' }}"}
              </CodeSnippet>{' '}
              will result in a Component not rendering error.
    </div>

[alisonjoseph]

Hey team! Please add your planning poker estimate with Zenhub @andreancardona @francinelucca @jdharvey-ibm

[alisonjoseph]

need to override max-width on the button

[francinelucca]

made estimate 3 since added new discovery

[jharvey10]

If a button can't be "inline", then we'll likely need to not use the carbon snippet component and instead hand-code the styles for this and make them inline so they can wrap onto more than one line.

[alisonjoseph]

Agreed, wondering if thats why we hand-coded this over in Gatsby 😅

[francinelucca]

reopening, this hasn't been fixed