breakout container for small screens

3 files changed, 62 insertions, 50 deletions

diff --git a/packages/dev-tools-pages/ts/components/Breakout.tsx b/packages/dev-tools-pages/ts/components/Breakout.tsx
new file mode 100644
index 000000000..fb76c8c29
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Breakout.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+import { media } from 'ts/variables';
+
+const Breakout = styled.div`
+    ${media.small`
+        margin-left: -30px;
+        width: calc(100% + 60px);
+  `};
+`;
+
+export default Breakout;
diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx
index 31ab421be..02bd0382e 100644
--- a/packages/dev-tools-pages/ts/components/Code.tsx
+++ b/packages/dev-tools-pages/ts/components/Code.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import { colors } from '../variables';
+import { colors } from 'ts/variables';
 import BaseButton from './Button';
 
 interface CodeProps {
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
index 64f87bea3..b51970a7e 100644
--- a/packages/dev-tools-pages/ts/components/Tabs.tsx
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -1,81 +1,81 @@
 import * as React from 'react';
 import styled from 'styled-components';
-import { colors } from '../variables';
 
-import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
-
-import {withContext, Props} from './withContext';
+import { colors } from 'ts/variables';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs';
+import Breakout from './Breakout';
+import { withContext, Props } from './withContext';
 
 const StyledTabList = styled(TabList)`
-  text-transform: uppercase;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;  
+    text-transform: uppercase;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
 `;
 
 const StyledTab = styled(Tab)`
-  height: 2.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  float: left;
-  &:not(:first-of-type) {
-    margin-left: .25rem;
-  }
-  &:focus, &:hover {
-    color: red;
-    outline: 0;
-  }
+    height: 2.5rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    float: left;
+    &:not(:first-of-type) {
+        margin-left: 0.25rem;
+    }
+    &:focus,
+    &:hover {
+        color: red;
+        outline: 0;
+    }
 `;
 
-const Root = styled.div<{primaryColor: string;}>`
+const Root =
+    styled.div <
+    { primaryColor: string } >
+    `
   ${StyledTab} {
     background-color: ${props => props.primaryColor};
   }
   ${StyledTab}[aria-selected="true"] {
     background-color: ${colors.gray};
-  } 
+  }
 `;
 
 interface TabsProps extends Props {
-  children: React.ReactNode;
+    children: React.ReactNode;
 }
 
 function Tabs(props: TabsProps) {
-  return (
-    <Root primaryColor={props.colors.secondary}>
-      <ReactTabs>
-        <StyledTabList>
-          { React.Children.map(props.children, child => {
-            const {props} = React.cloneElement(child as React.ReactElement<any>);
-            return <StyledTab>{props.title}</StyledTab>
-          }) }
-        </StyledTabList>
+    return (
+        <Breakout>
+            <Root primaryColor={props.colors.secondary}>
+                <ReactTabs>
+                    <StyledTabList>
+                        {React.Children.map(props.children, child => {
+                            const { props } = React.cloneElement(child as React.ReactElement<any>);
+                            return <StyledTab>{props.title}</StyledTab>;
+                        })}
+                    </StyledTabList>
 
-        { React.Children.map(props.children, child => (
-          <TabPanel>{child}</TabPanel>
-        )) }
-      </ReactTabs>
-    </Root>
-  )
+                    {React.Children.map(props.children, child => <TabPanel>{child}</TabPanel>)}
+                </ReactTabs>
+            </Root>
+        </Breakout>
+    );
 }
 
 interface TabBlockProps {
-  title: string;
-  children: React.ReactNode;
+    title: string;
+    children: React.ReactNode;
 }
 
 function TabBlock(props: TabBlockProps) {
-  return (
-    <React.Fragment>
-      {props.children}
-    </React.Fragment>
-  )
+    return <React.Fragment>{props.children}</React.Fragment>;
 }
 
 const ContextTabs = withContext(Tabs);
 
-export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file
+export { ContextTabs as Tabs, TabBlock };