docs(Props): make large code blocks more legible (#2215)

* docs: make large code blocks more legible

Components with large blocks of Default code
cause the table to extend beyond the page, making
it difficult to read. Make the code wrap properly
and allow the container to scroll.

As a specific example, this can be seen in the props
for Search.Result.

* style(docs): change variable name

docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js

@@ -7,6 +7,8 @@ import ComponentPropsComponents from './ComponentPropsComponents'
 import ComponentPropsDescription from './ComponentPropsDescription'
 import ComponentPropsHeader from './ComponentPropsHeader'
 
+const propsContainerStyle = { overflowX: 'auto' }
+
 export default class ComponentProps extends Component {
   static propTypes = {
     componentGroup: PropTypes.arrayOf(PropTypes.object),
@@ -50,7 +52,7 @@ export default class ComponentProps extends Component {
         />
 
         {activeName && (
-          <div>
+          <div style={propsContainerStyle}>
             <ComponentPropsDescription description={description} />
             <ComponentTable name={activeName} props={props} />
           </div>

docs/app/index.ejs

@@ -117,13 +117,11 @@
     }
 
     code:not(.hljs) {
-      padding: 0;
-      padding-top: 0.1em;
-      padding-bottom: 0.2em;
-      margin: 0;
       font-size: 87.5%;
       background-color: rgba(0, 0, 0, 0.04);
       border-radius: 3px;
+      white-space: pre;
+      display: inline-block;
     }
 
     code:not(.hljs)::before {