More mobile styling

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;
+  }
+}

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 });
 

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}>

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;
-  }
-}

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;
+  }
 }