Merge pull request #17 from usaatyuk/mobile-fix

Mobile fix

frontend/src/Documents/Docs.scss

@@ -13,6 +13,7 @@
     }
 
     .section {
+        padding: 1rem;
         width: 100%;
     }
 
@@ -22,6 +23,11 @@
         flex-grow: 0;
         flex-wrap: wrap;
 
+        // 400px is the minimal width for 2 cards to fit
+        @media (max-width: 400px) {
+            justify-content: center;
+        }
+
         .card {
             transition: 0.3s;
             user-select: none;
@@ -81,13 +87,14 @@
         align-content: baseline;
 
         h1 {
-            margin-left: 0;
+            margin-left: 1rem;
             margin-right: auto;
             min-width: 0;
             flex-grow: 1;
         }
 
         input {
+            margin-left: 1rem;
             transition: 0.3s;
             font-weight: 600;
             font-size: 2rem;

frontend/src/Home/Home.scss

@@ -24,6 +24,11 @@
     .bp3-navbar {
         transition: 0.3s;
 
+        > * {
+            // keeps the breadcrumbs from taking all the space
+            max-width: 70%;
+        }
+        
         * {
             transition: 0.3s;
         }
@@ -45,4 +50,4 @@
     .bp3-navbar {
         transition: 0.3s;
     }
-}
+}

frontend/src/Home/Home.tsx

@@ -76,7 +76,12 @@ export class HomeComponent extends React.PureComponent<IHomeProps> {
                 >
                     <Navbar fixedToTop={true}>
                         <Navbar.Group align={Alignment.LEFT}>
-                            <Navbar.Heading>Writer</Navbar.Heading>
+                            <Button
+                                minimal={true}
+                                onClick={() => this.props.history.push("/")}
+                            >
+                                Writer
+                            </Button>
                             <Navbar.Divider />
                             <Breadcrumbs items={breadcrumbs} />
                         </Navbar.Group>