themebuilder: fix builder layout with app on the side

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

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"} />

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"),