From 3ecf2729815ca969fac35d16c1cc93cd98df05e0 Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Mon, 14 Aug 2023 10:51:00 +1000
Subject: [PATCH] feat: feature/mvp-sprint-1 Fixed mobile nav styling

---
 remix/app/components/Commander/Commander.tsx   |  1 +
 remix/app/components/Commander/CommanderV1.tsx |  2 +-
 remix/app/components/MagicInput/MagicInput.tsx |  2 ++
 remix/app/components/Nav/Nav.tsx               | 14 ++++++++++++--
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx
index 5e3b2e5..1eb99c5 100644
--- a/remix/app/components/Commander/Commander.tsx
+++ b/remix/app/components/Commander/Commander.tsx
@@ -517,6 +517,7 @@ export const Commander = (props) => {
         className={"commander-uuid-" + commanderId}
         // display={["flex", commanderActive ? "flex" : "none"]}
         justifyContent="flex-start"
+        width="100%"
         maxWidth="100%"
         // height="100%"
         // paddingX={1}
diff --git a/remix/app/components/Commander/CommanderV1.tsx b/remix/app/components/Commander/CommanderV1.tsx
index 0368bd2..e15fc85 100644
--- a/remix/app/components/Commander/CommanderV1.tsx
+++ b/remix/app/components/Commander/CommanderV1.tsx
@@ -43,7 +43,7 @@ export const CommanderV1 = (props) => {
   const [showContext, setShowContextState] = React.useState(false)
 
   const mobileVW = React.useMemo(() => {
-    return "calc(100vw - 55px)"
+    return "calc(100vw - 108px)"
   }, [])
 
   const rainbowRepeats = 2
diff --git a/remix/app/components/MagicInput/MagicInput.tsx b/remix/app/components/MagicInput/MagicInput.tsx
index 80b56f7..3f2502e 100644
--- a/remix/app/components/MagicInput/MagicInput.tsx
+++ b/remix/app/components/MagicInput/MagicInput.tsx
@@ -148,6 +148,8 @@ export const MagicInput = (props) => {
         top={0}
         left={0}
         display={inputValue ? "none" : "block"}
+        width="100%"
+        maxWidth="100%"
         color="greys.dark"
         pointerEvents="none"
       >
diff --git a/remix/app/components/Nav/Nav.tsx b/remix/app/components/Nav/Nav.tsx
index 1e4e10b..fd1e0d8 100644
--- a/remix/app/components/Nav/Nav.tsx
+++ b/remix/app/components/Nav/Nav.tsx
@@ -74,7 +74,12 @@ export const Nav = (props) => {
           // bg='white'
           // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
         >
-          <Center className="nav-left-section" height="100%" marginRight="auto">
+          <Center
+            className="nav-left-section"
+            display={["none", "flex"]}
+            height="100%"
+            marginRight="auto"
+          >
             <Center transform="scaleX(-100%)" cursor="pointer">
               <Link to="/">
                 <Icon size="12px" name="unicorn"></Icon>
@@ -107,9 +112,14 @@ export const Nav = (props) => {
                 ></Icon> */}
               </Center>
             )}
-            <Center transform="scaleX(-100%)" cursor="pointer">
+            <Center transform={["", "scaleX(-100%)"]} cursor="pointer">
               <Icon size="12px" name="rainbow"></Icon>
             </Center>
+            <Center display={["flex", "none"]} cursor="pointer">
+              <Link to="/">
+                <Icon size="12px" name="unicorn"></Icon>
+              </Link>
+            </Center>
           </Center>
           {/* <RainbowSkeleton
             marginLeft="auto"