Responsive carbon (#925)

* From 768px to 920px, toolbar overflows container, shifted media query at max-width of 920px

* min-width of main content is larger than viewport, causing overflow

* main page has scrollbars even though all content visually is within viewport, removed/lessened margin on main and body

* On Firefox, the items inside toolbar second row would not match to container's height, thus would be smaller. 'flex: 1' applys flex growth, but sets the initial size of item to 0%. flex basis needs to be added as auto to fit the parent's main size property.

Co-authored-by: Michael Fix <mrfix84@gmail.com>

components/Editor.js

@@ -449,7 +449,7 @@ class Editor extends React.Component {
             .toolbar-second-row {
               height: 40px;
               display: flex;
-              flex: 1;
+              flex: 1 1 auto;
             }
             .toolbar-second-row > :global(div:not(:last-of-type)) {
               margin-right: 0.5rem;

components/Page.js

@@ -16,7 +16,7 @@ class Page extends React.Component {
   render() {
     const { children, enableHeroText, flex } = this.props
     return (
-      <main className="main mt4 mb4">
+      <main className="main mb3">
         <Meta />
         <AuthContext>
           <Announcement />
@@ -33,6 +33,7 @@ class Page extends React.Component {
           {`
             .main {
               ${flex ? COLUMN : ''}
+              margin-top: 6rem;
             }
             .login-button-container {
               position: absolute;
@@ -42,7 +43,6 @@ class Page extends React.Component {
             @media (min-width: 1024px) {
               .main {
                 ${COLUMN};
-                min-width: 1080px; /* temporary fix for mobile overflow issue */
               }
             }
           `}

components/Toolbar.js

@@ -23,7 +23,7 @@ const Toolbar = props => (
           margin-right: 0px;
         }
 
-        @media (max-width: 768px) {
+        @media (max-width: 920px) {
           .toolbar {
             max-width: 100%;
             height: auto;

components/style/Typography.js

@@ -32,7 +32,6 @@ export default () => (
       body {
         font-size: var(--h4);
         line-height: var(--lh);
-        margin: 6rem 0;
       }
 
       h1,