From 4b74cba4e4451907a00205e15571a487f9d0e8d1 Mon Sep 17 00:00:00 2001
From: Abdullah Atta <abdullahatta@streetwriters.co>
Date: Tue, 8 Aug 2023 13:42:28 +0500
Subject: [PATCH] themebuilder: fix builder layout with app on the side

---
 .../theme-builder/src/components/theme-builder/index.tsx | 9 ++++++---
 apps/theme-builder/src/index.tsx                         | 3 ++-
 apps/web/src/index.tsx                                   | 5 +----
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/apps/theme-builder/src/components/theme-builder/index.tsx b/apps/theme-builder/src/components/theme-builder/index.tsx
index 087fa285b..bff2e1869 100644
--- a/apps/theme-builder/src/components/theme-builder/index.tsx
+++ b/apps/theme-builder/src/components/theme-builder/index.tsx
@@ -123,14 +123,17 @@ export default function ThemeBuilder() {
   return loading ? null : (
     <Flex
       sx={{
-        width: 300,
+        width: 260,
+        flexShrink: 0,
         bg: "background",
         display: "flex",
         overflow: "hidden",
         flexDirection: "column",
         overflowY: "scroll",
-        padding: "10px 0px",
-        rowGap: "10px"
+        pt: 2,
+        rowGap: 2,
+        borderLeft: "1px solid var(--border)",
+        zIndex: 999
       }}
     >
       <Flex
diff --git a/apps/theme-builder/src/index.tsx b/apps/theme-builder/src/index.tsx
index 3204e630a..eda576604 100644
--- a/apps/theme-builder/src/index.tsx
+++ b/apps/theme-builder/src/index.tsx
@@ -34,7 +34,8 @@ async function renderApp() {
       sx={{
         display: "flex",
         "#app": { flex: 1, height: "unset" },
-        height: path === "default" ? "100%" : "unset"
+        "& > :first-child": { flex: 1 },
+        height: "100%"
       }}
     >
       <Component route={props?.route || "login:email"} />
diff --git a/apps/web/src/index.tsx b/apps/web/src/index.tsx
index cf8b2f3e1..aaffb1bd4 100644
--- a/apps/web/src/index.tsx
+++ b/apps/web/src/index.tsx
@@ -35,10 +35,7 @@ async function renderApp() {
   const { default: Component } = await component();
   logger.measure("app render");
   render(
-    <BaseThemeProvider
-      addGlobalStyles
-      sx={{ height: path === "default" ? "100%" : "unset" }}
-    >
+    <BaseThemeProvider addGlobalStyles sx={{ height: "100%" }}>
       <Component route={props?.route || "login:email"} />
     </BaseThemeProvider>,
     document.getElementById("root"),