From 8726ad37f62aab07b8979e8e77da7aa65c6e3862 Mon Sep 17 00:00:00 2001
From: "Braden M. Kelley" <redbmk@gmail.com>
Date: Wed, 18 Oct 2017 22:26:59 -0700
Subject: [PATCH 1/2] 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.
---
 .../ComponentDoc/ComponentProps/ComponentProps.js           | 4 +++-
 docs/app/index.ejs                                          | 6 ++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
index d52384d153..ced167dc59 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
@@ -7,6 +7,8 @@ import ComponentPropsComponents from './ComponentPropsComponents'
 import ComponentPropsDescription from './ComponentPropsDescription'
 import ComponentPropsHeader from './ComponentPropsHeader'
 
+const propsTableContainerStyle = { 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={propsTableContainerStyle}>
             <ComponentPropsDescription description={description} />
             <ComponentTable name={activeName} props={props} />
           </div>
diff --git a/docs/app/index.ejs b/docs/app/index.ejs
index 66682d7087..8769a5fad6 100644
--- a/docs/app/index.ejs
+++ b/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 {

From 604ae4590309f1771256ecec1bd220e2e6d2f4d4 Mon Sep 17 00:00:00 2001
From: Alexander Fedyashov <alexander.mcgarret@gmail.com>
Date: Sat, 21 Oct 2017 18:41:03 +0300
Subject: [PATCH 2/2] style(docs): change variable name

---
 .../Components/ComponentDoc/ComponentProps/ComponentProps.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
index ced167dc59..fed64ffc5d 100644
--- a/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
+++ b/docs/app/Components/ComponentDoc/ComponentProps/ComponentProps.js
@@ -7,7 +7,7 @@ import ComponentPropsComponents from './ComponentPropsComponents'
 import ComponentPropsDescription from './ComponentPropsDescription'
 import ComponentPropsHeader from './ComponentPropsHeader'
 
-const propsTableContainerStyle = { overflowX: 'auto' }
+const propsContainerStyle = { overflowX: 'auto' }
 
 export default class ComponentProps extends Component {
   static propTypes = {
@@ -52,7 +52,7 @@ export default class ComponentProps extends Component {
         />
 
         {activeName && (
-          <div style={propsTableContainerStyle}>
+          <div style={propsContainerStyle}>
             <ComponentPropsDescription description={description} />
             <ComponentTable name={activeName} props={props} />
           </div>