Mobile Responsive Styles (#580)

* WIP: Responsive styles

* Flip breakpoints, ensure doc doesn't spread

* Add MenuIcon

* Refactor Sidebar to share mobile responsive styles

* Fix accidental find/replace

* Tweak padding to take into account icon spacing

app/components/Editor/Editor.js

@@ -4,8 +4,10 @@ import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Value, Change } from 'slate';
 import { Editor } from 'slate-react';
-import type { SlateNodeProps, Plugin } from './types';
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
 import keydown from 'react-keydown';
+import type { SlateNodeProps, Plugin } from './types';
 import getDataTransferFiles from 'utils/getDataTransferFiles';
 import Flex from 'shared/components/Flex';
 import ClickablePadding from './components/ClickablePadding';
@@ -20,7 +22,6 @@ import renderMark from './marks';
 import createRenderNode from './nodes';
 import schema from './schema';
 import { isModKey } from './utils';
-import styled from 'styled-components';
 
 type Props = {
   text: string,
@@ -227,9 +228,15 @@ class MarkdownEditor extends Component {
 }
 
 const MaxWidth = styled(Flex)`
-  margin: 0 60px;
-  max-width: 46em;
+  padding: 0 20px;
+  max-width: 100vw;
   height: 100%;
+
+  ${breakpoint('tablet')`
+    padding: 0;
+    margin: 0 60px;
+    max-width: 46em;
+  `};
 `;
 
 const Header = styled(Flex)`

app/components/Editor/components/Contents.js

@@ -1,5 +1,7 @@
 // @flow
 import React, { Component } from 'react';
+import styled from 'styled-components';
+import breakpoint from 'styled-components-breakpoint';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { Editor } from 'slate-react';
@@ -7,7 +9,6 @@ import { Block } from 'slate';
 import { List } from 'immutable';
 import { color } from 'shared/styles/constants';
 import headingToSlug from '../headingToSlug';
-import styled from 'styled-components';
 
 type Props = {
   editor: Editor,
@@ -91,6 +92,7 @@ class Contents extends Component {
 }
 
 const Wrapper = styled.div`
+  display: none;
   position: fixed;
   right: 0;
   top: 150px;
@@ -99,6 +101,10 @@ const Wrapper = styled.div`
   @media print {
     display: none;
   }
+
+  ${breakpoint('tablet')`
+    display: block;
+  `};
 `;
 
 const Anchor = styled.a`

app/components/Editor/components/Image.js

@@ -94,6 +94,7 @@ const Caption = styled.input`
   text-align: center;
   width: 100%;
   outline: none;
+  background: none;
 
   &::placeholder {
     color: ${color.slate};