From 9eb838511d5d72c0bb226d04f1cf40c62d18a648 Mon Sep 17 00:00:00 2001
From: "taulant.disha" <taulantdisha@Taulants-MacBook-Pro.local>
Date: Wed, 22 May 2024 00:39:27 +0300
Subject: [PATCH] mobile fixes

---
 src/App.tsx                                   |  5 ++-
 .../Nova/AutNovaTabs/Archetype/Archetype.tsx  | 36 +++++++++++++++----
 src/pages/Nova/ToolbarConnector.tsx           |  8 ++---
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e3e30cf..7ed95d3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,7 +60,10 @@ function App() {
                   backgroundAttachment: "fixed",
                   backgroundSize: "cover",
                   backgroundPosition: "center",
-                  height: "100vh",
+                  height: {
+                    xs: window.innerHeight,
+                    sm: "100%"
+                  },
                   width: "100vw",
                   position: "fixed",
                   top: 0,
diff --git a/src/pages/Nova/AutNovaTabs/Archetype/Archetype.tsx b/src/pages/Nova/AutNovaTabs/Archetype/Archetype.tsx
index 8869269..4f389c8 100644
--- a/src/pages/Nova/AutNovaTabs/Archetype/Archetype.tsx
+++ b/src/pages/Nova/AutNovaTabs/Archetype/Archetype.tsx
@@ -56,7 +56,10 @@ const Archetypes = ({ nova }) => {
   };
 
   return (
-    <Container maxWidth="lg" sx={{ py: "20px", height: "100%" }}>
+    <Container
+      maxWidth="lg"
+      sx={{ py: "20px", height: "100%", minHeight: "300px" }}
+    >
       <>
         <ErrorDialog
           handleClose={() => setNotAdminOpen(false)}
@@ -79,11 +82,32 @@ const Archetypes = ({ nova }) => {
               justifyContent: "center",
               gridGap: "12px",
               textAlign: "center",
-              position: "absolute",
-              top: "60px",
-              left: "60px",
-              right: "60px",
-              bottom: "60px",
+              padding: {
+                xs: "30px 20px"
+              },
+              position: {
+                xs: "relative",
+                sm: "absolute"
+              },
+              width: {
+                xs: "100%"
+              },
+              top: {
+                xs: "0",
+                sm: "60px"
+              },
+              left: {
+                xs: "0",
+                sm: "60px"
+              },
+              right: {
+                xs: "0",
+                sm: "60px"
+              },
+              bottom: {
+                xs: "0",
+                sm: "60px"
+              },
               zIndex: 99,
               backdropFilter: "blur(12px)",
               background: "rgba(128, 128, 128, 0.06)",
diff --git a/src/pages/Nova/ToolbarConnector.tsx b/src/pages/Nova/ToolbarConnector.tsx
index 6d9c27d..fd527ae 100644
--- a/src/pages/Nova/ToolbarConnector.tsx
+++ b/src/pages/Nova/ToolbarConnector.tsx
@@ -55,11 +55,11 @@ export const ToolbarConnector = () => {
             flexDirection: {
               xs: "row",
               sm: "row"
-            },
-            py: {
-              xs: "8px",
-              sm: 0
             }
+            // py: {
+            //   xs: "8px",
+            //   sm: 0
+            // }
           }
         }}
       >