From 85d77a32bf6205a2e51613937dcda7a5aacb4507 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Mon, 23 Aug 2021 12:50:19 -0700
Subject: [PATCH] More mobile styling

---
 src/Header.module.css |  8 +++++++-
 src/Home.jsx          |  2 +-
 src/Layout.jsx        |  8 --------
 src/Layout.module.css | 37 -------------------------------------
 src/Room.module.css   |  8 +++++++-
 5 files changed, 15 insertions(+), 48 deletions(-)

diff --git a/src/Header.module.css b/src/Header.module.css
index 54d99812..4277aa91 100644
--- a/src/Header.module.css
+++ b/src/Header.module.css
@@ -3,7 +3,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 98px;
+  height: 64px;
   user-select: none;
   flex-shrink: 0;
 }
@@ -43,3 +43,9 @@
   font-weight: 600;
   flex-shrink: 0;
 }
+
+@media(min-width: 800px) {
+  .header {
+    height: 98px;
+  }
+}
\ No newline at end of file
diff --git a/src/Home.jsx b/src/Home.jsx
index 93684044..3536e358 100644
--- a/src/Home.jsx
+++ b/src/Home.jsx
@@ -21,7 +21,7 @@ import { Header, LeftNav, UserNav } from "./Header";
 import ColorHash from "color-hash";
 import styles from "./Home.module.css";
 import { FieldRow, InputField, Button, ErrorMessage } from "./Input";
-import { Center, Content, Sidebar, Modal } from "./Layout";
+import { Center, Content, Modal } from "./Layout";
 
 const colorHash = new ColorHash({ lightness: 0.3 });
 
diff --git a/src/Layout.jsx b/src/Layout.jsx
index f97d3921..b131132c 100644
--- a/src/Layout.jsx
+++ b/src/Layout.jsx
@@ -10,14 +10,6 @@ export function Content({ children, className, ...rest }) {
   );
 }
 
-export function Sidebar({ children, className, ...rest }) {
-  return (
-    <aside className={classNames(styles.sidebar, className)} {...rest}>
-      {children}
-    </aside>
-  );
-}
-
 export function Center({ children, className, ...rest }) {
   return (
     <div className={classNames(styles.center, className)} {...rest}>
diff --git a/src/Layout.module.css b/src/Layout.module.css
index 74bb14c5..5ad07f8f 100644
--- a/src/Layout.module.css
+++ b/src/Layout.module.css
@@ -5,26 +5,6 @@
   flex: 1;
 }
 
-.sidebar {
-  display: flex;
-  flex-direction: column;
-  height: auto;
-  flex: 1;
-  min-width: 200px;
-  width: auto;
-  max-width: none;
-  padding: 12px;
-  background-color: #21262c;
-  border-radius: 8px;
-  margin-bottom: 20px;
-}
-
-.sidebar h5 {
-  color: rgb(142, 153, 164);
-  font-size: 13px;
-  margin: 0 0 8px 0;
-}
-
 .center {
   display: flex;
   flex: 1;
@@ -50,20 +30,3 @@
   font-size: 13px;
   text-align: center;
 }
-
-@media (min-width: 600px) { 
-  .sidebar {
-    height: 100%;
-    overflow-y: auto;
-    max-width: 320px;
-    margin-bottom: 0;
-  }
-
-  .content {
-    flex-direction: row;
-  }
-
-  .modal {
-    margin-bottom: 0;
-  }
-}
\ No newline at end of file
diff --git a/src/Room.module.css b/src/Room.module.css
index 32253f4b..b03d3c2e 100644
--- a/src/Room.module.css
+++ b/src/Room.module.css
@@ -28,6 +28,8 @@ limitations under the License.
   flex-direction: column;
   align-items: center;
   flex: 1;
+  overflow: hidden;
+  margin-bottom: 20px;
 }
 
 .preview {
@@ -96,7 +98,7 @@ limitations under the License.
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 118px;
+  height: 64px;
 }
 
 .footer > * {
@@ -115,4 +117,8 @@ limitations under the License.
   .roomContainer {
     flex-direction: row;
   }
+
+  .footer {
+    height: 118px;
+  }
 }
\ No newline at end of file