From f5a268c91619160e32ba469514f7b27f5718be81 Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Wed, 16 Feb 2022 23:10:35 -0800
Subject: [PATCH] CSS updates for mobile.

---
 components/layout/MenuLayout.module.css    | 7 +++++++
 components/pages/WebsiteDetails.js         | 2 +-
 components/pages/WebsiteDetails.module.css | 7 +++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/components/layout/MenuLayout.module.css b/components/layout/MenuLayout.module.css
index c0665d4c..126d31a3 100644
--- a/components/layout/MenuLayout.module.css
+++ b/components/layout/MenuLayout.module.css
@@ -19,9 +19,16 @@
 
 @media only screen and (max-width: 992px) {
   .container {
+    flex-direction: column;
     height: auto;
   }
 
+  .container .menu {
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-start;
+  }
+
   .container .content {
     border-top: 1px solid var(--gray300);
     border-left: 0;
diff --git a/components/pages/WebsiteDetails.js b/components/pages/WebsiteDetails.js
index 876fbfc4..2d9dceaa 100644
--- a/components/pages/WebsiteDetails.js
+++ b/components/pages/WebsiteDetails.js
@@ -49,7 +49,7 @@ export default function WebsiteDetails({ websiteId }) {
   } = usePageQuery();
 
   const BackButton = () => (
-    <div key="back-button" className={styles.backButton}>
+    <div key="back-button" className={classNames(styles.backButton, 'col-12')}>
       <Link key="back-button" href={resolve({ view: undefined })} icon={<Arrow />} size="small">
         <FormattedMessage id="label.back" defaultMessage="Back" />
       </Link>
diff --git a/components/pages/WebsiteDetails.module.css b/components/pages/WebsiteDetails.module.css
index e8dd5399..6beacbff 100644
--- a/components/pages/WebsiteDetails.module.css
+++ b/components/pages/WebsiteDetails.module.css
@@ -33,3 +33,10 @@
 .eventschart {
   padding-top: 30px;
 }
+
+@media only screen and (max-width: 992px) {
+  .menu {
+    display: flex;
+    flex-direction: column;
+  }
+}