docs(layouts): more layout fixes

docs/src/components/ComponentDoc/ComponentDoc.tsx

@@ -2,7 +2,7 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import { withRouter } from 'react-router'
-import { Flex, Header, Icon, Dropdown, Text, themes, Grid, Ref } from '@stardust-ui/react'
+import { Flex, Header, Icon, Dropdown, Text, themes, Grid } from '@stardust-ui/react'
 
 import componentInfoShape from 'docs/src/utils/componentInfoShape'
 import { scrollToAnchor, examplePathToHash, getFormattedHash } from 'docs/src/utils'
@@ -137,28 +137,23 @@ class ComponentDoc extends React.Component<any, any> {
             </>
           </Flex.Item>
         </Flex>
-        <Grid columns="auto 300px">
-          <Flex column>
-            <Flex.Item>
-              <Ref innerRef={this.handleExamplesRef}>
-                <ExampleContext.Provider
-                  value={{
-                    activeAnchorName: activePath,
-                    onExamplePassed: this.handleExamplePassed,
-                  }}
-                >
-                  <ComponentExamples displayName={info.displayName} />
-                </ExampleContext.Provider>
-              </Ref>
-            </Flex.Item>
-
-            <Flex.Item>
-              <div style={exampleEndStyle}>
-                This is the bottom <Icon name="pointing down" />
-              </div>
-            </Flex.Item>
-
-            {/* TODO: bring back the right floating menu
+        <Grid columns="auto 300px" styles={{ justifyContent: 'normal', justifyItems: 'stretch' }}>
+          <div ref={this.handleExamplesRef}>
+            <ExampleContext.Provider
+              value={{
+                activeAnchorName: activePath,
+                onExamplePassed: this.handleExamplePassed,
+              }}
+            >
+              <ComponentExamples displayName={info.displayName} />
+            </ExampleContext.Provider>
+
+            <div style={exampleEndStyle}>
+              This is the bottom <Icon name="pointing down" />
+            </div>
+          </div>
+
+          {/* TODO: bring back the right floating menu
             <Box styles={{ width: '25%', paddingLeft: '14px' }}>
               <ComponentSidebar
                 activePath={activePath}
@@ -168,7 +163,6 @@ class ComponentDoc extends React.Component<any, any> {
               />
             </Box>
           */}
-          </Flex>
         </Grid>
       </div>
     )

docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx

@@ -18,7 +18,7 @@ import {
 } from '@stardust-ui/react'
 
 import { examplePathToHash, getFormattedHash, knobsContext, scrollToAnchor } from 'docs/src/utils'
-import { callable, constants, pxToRem } from 'src/lib'
+import { callable, constants } from 'src/lib'
 import Editor, { EDITOR_BACKGROUND_COLOR, EDITOR_GUTTER_COLOR } from 'docs/src/components/Editor'
 import { babelConfig, importResolver } from 'docs/src/components/Playground/renderConfig'
 import ExampleContext, { ExampleContextValue } from 'docs/src/context/ExampleContext'
@@ -56,7 +56,6 @@ interface ComponentExampleState {
 const childrenStyle: React.CSSProperties = {
   paddingTop: 0,
   paddingBottom: '10px',
-  maxWidth: pxToRem(500),
 }
 
 /**
@@ -79,7 +78,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       knobs: this.getDefaultKnobsValue(),
       showCode: this.isActiveHash(),
       componentVariables: {},
-      showRtl: examplePath && examplePath.endsWith('rtl') ? true : false,
+      showRtl: examplePath && examplePath.endsWith('rtl'),
       showTransparent: false,
       showVariables: false,
     }

docs/src/components/ComponentDoc/ExampleSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Flex, Grid, Header } from '@stardust-ui/react'
+import { Grid, Header } from '@stardust-ui/react'
 
 import { Extendable } from 'src/types'
 
@@ -14,19 +14,15 @@ export type ExampleSectionProps = Extendable<{
   title: string
 }>
 
-const ExampleSection: React.FC<ExampleSectionProps> = ({ title, children, ...restProps }) => (
-  <Flex column>
-    <Flex.Item>
-      <>
-        <Header as="h2" styles={headerStyle} className="no-anchor">
-          {title}
-        </Header>
-        <Grid variables={{ gridGap: '2rem' }} columns="1">
-          {children}
-        </Grid>
-      </>
-    </Flex.Item>
-  </Flex>
+const ExampleSection: React.FC<ExampleSectionProps> = ({ title, children }) => (
+  <>
+    <Header as="h2" styles={headerStyle} className="no-anchor">
+      {title}
+    </Header>
+    <Grid variables={{ gridGap: '2rem' }} columns="1">
+      {children}
+    </Grid>
+  </>
 )
 
 export default ExampleSection

docs/src/components/DocsLayout.tsx

@@ -79,7 +79,7 @@ class DocsLayout extends React.Component<any, any> {
         >
           <Sidebar />
         </Provider>
-        <div role="main" style={{ display: 'flex', flex: '1 0 auto', paddingLeft: 250 }}>
+        <div role="main" style={{ marginLeft: 250 }}>
           <Children {...props} />
         </div>
       </>

docs/src/examples/components/Text/States/TextExampleTruncated.shorthand.tsx

@@ -11,7 +11,7 @@ const [notTruncatedText, truncatedText] = [
 )
 
 const TextExampleTruncatedShorthand = () => (
-  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: 500 }}>
     <Text content={notTruncatedText} />
     <br />
     <br />

docs/src/examples/components/Text/States/TextExampleTruncated.tsx

@@ -11,7 +11,7 @@ const [notTruncatedText, truncatedText] = [
 )
 
 const TextExampleTruncated = () => (
-  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>
+  <div style={{ overflow: 'hidden', textOverflow: 'ellipsis', width: 500 }}>
     <Text>{notTruncatedText}</Text>
     <br />
     <br />