From 2b5cdcc3beae5a49b80328f77c2cf40f9df9fc4a Mon Sep 17 00:00:00 2001
From: Varun <varunv5000@gmail.com>
Date: Tue, 1 Feb 2022 12:26:50 -0500
Subject: [PATCH 1/2] This update makes the navbar align better on mobile.

This took way too long lol
---
 packages/react-app/src/App.jsx                      | 2 +-
 packages/react-app/src/components/Account/index.jsx | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
index 25c3f595..b0f5ec21 100644
--- a/packages/react-app/src/App.jsx
+++ b/packages/react-app/src/App.jsx
@@ -541,7 +541,7 @@ function App(props) {
             networkDisplay={networkDisplay}
             hostToggleSwitch={
               room && (
-                <div className="flex flex-col mt-5 px-7">
+                <div className="flex flex-col mt-5 md:px-7 order-last md:order-first">
                   <Space>
                     <Button
                       size="large"
diff --git a/packages/react-app/src/components/Account/index.jsx b/packages/react-app/src/components/Account/index.jsx
index 7d298118..1cfce17f 100644
--- a/packages/react-app/src/components/Account/index.jsx
+++ b/packages/react-app/src/components/Account/index.jsx
@@ -79,12 +79,14 @@ export default function Account({
       modalButtons.push(
         <div key="first">
           {isValidAddress(address) ? (
-            <div className="flex flex-row">
+            <div>
+            <div className="flex flex-col md:flex-row  items-end">
               {hostToggleSwitch}
-              <div className="flex flex-col mr-4">
+              <div className="flex flex-col mt-2 md:mt-0">
                 <label className="text-base">Select Network:</label>
                 {networkSelect}
               </div>
+              <div className="flex md:ml-4 order-first md:order-last" >
               <Dropdown.Button overlay={menu} icon={<DownOutlined />} trigger="click">
                 <Address
                   address={address}
@@ -94,6 +96,8 @@ export default function Account({
                 />
               </Dropdown.Button>
               {networkDisplay}
+              </div>
+            </div>
             </div>
           ) : (
             ""

From c9415cdd77c409ec1c1352fa4b3e5459af48b37a Mon Sep 17 00:00:00 2001
From: Varun <varunv5000@gmail.com>
Date: Tue, 1 Feb 2022 12:34:58 -0500
Subject: [PATCH 2/2] Slight Ui fix

---
 packages/react-app/src/App.jsx                      | 2 +-
 packages/react-app/src/components/Account/index.jsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-app/src/App.jsx b/packages/react-app/src/App.jsx
index b0f5ec21..c317fb65 100644
--- a/packages/react-app/src/App.jsx
+++ b/packages/react-app/src/App.jsx
@@ -492,7 +492,7 @@ function App(props) {
 
   return (
     <div className="App pb-20 bg-purple-darkpurple">
-      <div className="p-10 mx-auto flex flex-wrap">
+      <div className="p-10 mx-auto flex">
         <a
           href="/"
           target="_blank"
diff --git a/packages/react-app/src/components/Account/index.jsx b/packages/react-app/src/components/Account/index.jsx
index 1cfce17f..bf109330 100644
--- a/packages/react-app/src/components/Account/index.jsx
+++ b/packages/react-app/src/components/Account/index.jsx
@@ -108,7 +108,7 @@ export default function Account({
       modalButtons.push(
         <Button
           key="loginbutton"
-          style={{ verticalAlign: "top", marginLeft: 8, marginTop: 4, width: width }}
+          style={{ verticalAlign: "top",   position: "fixed", top: 20, right: 10, width: width }}
           size="medium"
           onClick={loadWeb3Modal}
           key="second"