Responsive CSS fixes.

components/charts/QuickButtons.module.css

@@ -25,3 +25,9 @@
     display: none;
   }
 }
+
+@media only screen and (max-width: 576px) {
+  .buttons {
+    display: none;
+  }
+}

components/common/UserButton.js

@@ -48,7 +48,13 @@ export default function UserButton() {
         <Icon icon={<Chevron />} size="small" />
       </div>
       {showMenu && (
-        <Menu options={menuOptions} onSelect={handleSelect} float="bottom" align="right" />
+        <Menu
+          className={styles.menu}
+          options={menuOptions}
+          onSelect={handleSelect}
+          float="bottom"
+          align="right"
+        />
       )}
     </div>
   );

components/common/UserButton.module.css

@@ -11,3 +11,7 @@
 .username:hover {
   background: var(--gray50);
 }
+
+.menu {
+  z-index: 100;
+}

components/layout/Footer.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   font-size: var(--font-size-small);
-  padding: 40px 0;
+  min-height: 100px;
 }
 
 .footer button {

components/layout/Header.js

@@ -13,14 +13,14 @@ export default function Header() {
   return (
     <header className="container">
       <div className={classNames(styles.header, 'row align-items-center')}>
-        <div className="col">
+        <div className="col-12 col-md-6">
           <div className={styles.title}>
             <Icon icon={<Logo />} size="large" className={styles.logo} />
             {user ? <Link href="/">umami</Link> : 'umami'}
           </div>
         </div>
         {user && (
-          <div className="col">
+          <div className="col-12 col-md-6">
             <div className={styles.nav}>
               <Link href="/dashboard">Dashboard</Link>
               <Link href="/settings">Settings</Link>

components/layout/Header.module.css

@@ -1,16 +1,16 @@
 .header {
   display: flex;
-  height: 80px;
-}
-
-.header > div {
-  flex: 1;
+  min-height: 100px;
 }
 
 .title {
   font-size: var(--font-size-large);
 }
 
+.logo {
+  margin-right: 12px;
+}
+
 .nav {
   list-style: none;
   display: flex;
@@ -24,6 +24,13 @@
   margin-left: 40px;
 }
 
-.logo {
-  margin-right: 12px;
+@media only screen and (max-width: 768px) {
+  .title {
+    text-align: center;
+  }
+
+  .nav {
+    display: flex;
+    justify-content: space-evenly;
+  }
 }

components/layout/MenuLayout.js

@@ -14,16 +14,18 @@ export default function MenuLayout({
   children,
 }) {
   return (
-    <div className={classNames(styles.container, className)}>
+    <div className={classNames(styles.container, className, 'row')}>
       <Menu
         options={menu}
         selectedOption={selectedOption}
-        className={classNames(styles.menu, menuClassName)}
+        className={classNames(styles.menu, menuClassName, 'col-12 col-lg-3')}
         selectedClassName={styles.selected}
         optionClassName={classNames(styles.option, optionClassName)}
         onSelect={onMenuSelect}
       />
-      <div className={classNames(styles.content, contentClassName)}>{children}</div>
+      <div className={classNames(styles.content, contentClassName, 'col-12 col-lg-9')}>
+        {children}
+      </div>
     </div>
   );
 }

components/layout/MenuLayout.module.css

@@ -1,31 +1,27 @@
 .container {
   display: flex;
   flex: 1;
+  position: relative;
 }
 
 .container .menu {
+  display: flex;
+  flex-direction: column;
+  padding: 30px 0;
   border: 0;
 }
 
-.menu {
-  display: flex;
-  flex-direction: column;
-  padding-top: 30px;
-}
-
-.content {
+.container .content {
   display: flex;
   flex-direction: column;
   border-left: 1px solid var(--gray300);
   padding-left: 30px;
-  flex: 1;
 }
 
 .option {
   font-size: var(--font-size-normal);
   padding: 8px 16px;
   cursor: pointer;
-  min-width: 160px;
   margin-right: 30px;
   border-radius: 4px;
 }
@@ -37,3 +33,11 @@
 .selected {
   font-weight: 600;
 }
+
+@media only screen and (max-width: 992px) {
+  .container .content {
+    border-top: 1px solid var(--gray300);
+    border-left: 0;
+    padding-left: 0;
+  }
+}