wip fix

app/web/src/nova/ed/panel/main/main.tsx

@@ -8,55 +8,64 @@ import { loadComponent } from "../../logic/tree/sync-walk";
 export const EdMain = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   return (
-    <div className="flex flex-1 relative">
+    <div
-      {!!p.page.building && <Loading backdrop={false} />}
+      className={cx(
-      {!p.page.building && (
+        "flex flex-1 relative",
-        <View
+        css`
-          mode={p.mode}
+          contain: content;
-          layout={{ show: false }}
+        `
-          isEditor={true}
-          api_url={p.site.config.api_url}
-          component={{
-            async load(id_comp) {
-              await loadComponent(p, id_comp, compLoaded);
-            },
-          }}
-          load={{
-            mode: "tree_meta",
-            meta: p.page.meta,
-            entry: p.page.entry,
-          }}
-          site_id={p.site.id}
-          page_id={p.page.cur.id}
-          bind={({ render }) => {
-            p.page.render = render;
-          }}
-          hidden={(item) => {
-            if (item.hidden) return true;
-            return false;
-          }}
-          hover={{
-            get(item) {
-              return active.hover_id === item.id;
-            },
-            set(id) {
-              active.hover_id = id;
-              p.render();
-              p.page.render();
-            },
-          }}
-          active={{
-            get(item) {
-              return active.item_id === item.id;
-            },
-            set(id) {
-              active.item_id = id;
-              p.render();
-              p.page.render();
-            },
-          }}
-        />
       )}
+    >
+      <div className="absolute overflow-auto inset-0">
+        {!!p.page.building && <Loading backdrop={false} />}
+        {!p.page.building && (
+          <View
+            mode={p.mode}
+            layout={{ show: false }}
+            isEditor={true}
+            api_url={p.site.config.api_url}
+            component={{
+              async load(id_comp) {
+                await loadComponent(p, id_comp, compLoaded);
+              },
+            }}
+            load={{
+              mode: "tree_meta",
+              meta: p.page.meta,
+              entry: p.page.entry,
+            }}
+            site_id={p.site.id}
+            page_id={p.page.cur.id}
+            bind={({ render }) => {
+              p.page.render = render;
+            }}
+            hidden={(item) => {
+              if (item.hidden) return true;
+              return false;
+            }}
+            hover={{
+              get(item) {
+                return active.hover_id === item.id;
+              },
+              set(id) {
+                active.hover_id = id;
+                p.render();
+                p.page.render();
+              },
+            }}
+            active={{
+              get(item) {
+                return active.item_id === item.id;
+              },
+              set(id) {
+                active.item_id = id;
+                p.render();
+                p.page.render();
+              },
+            }}
+          />
+        )}
+      </div>
     </div>
   );
 };

app/web/src/nova/ed/panel/popup/api/api-server.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from "react";
 import { deepClone, useGlobal, useLocal } from "web-utils";
+import { Modal } from "../../../../../utils/ui/modal";
 import { EDGlobal } from "../../../logic/ed-global";
 import { EdApiDB } from "./api-db";
 import { EdApiDeploy } from "./api-deploy";
 import { EdApiDomain } from "./api-domain";
 import { apiRef, apiUrl, checkAPI, dev, server } from "./api-utils";
-import { Modal } from "../../../../../utils/ui/modal";
 
 export const EdPopApi = () => {
   const p = useGlobal(EDGlobal, "EDITOR");

app/web/src/nova/ed/panel/popup/page/page-popup.tsx

@@ -63,15 +63,12 @@ export const EdPagePop = () => {
               pagePicker.ref = ref;
             }
           }}
-          className={cx(
+          className={cx("absolute inset-[5%] bg-white flex")}
-            "absolute inset-[5%] bg-white flex",
-            css`
-              z-index: 100;
-            `
-          )}
         >
           <div className="relative flex flex-1 items-stretch text-[12px] overflow-auto">
-            {pagePicker.status === "loading" && <Loading note="listing-page" backdrop={false} />}
+            {pagePicker.status === "loading" && (
+              <Loading note="listing-page" backdrop={false} />
+            )}
 
             {pagePicker.ref && (
               <DndProvider

app/web/src/nova/ed/panel/popup/site/site-popup.tsx

@@ -93,16 +93,11 @@ export const EdPopSite = () => {
           }
         }}
       >
-        <div
+        <div className={cx("absolute inset-[5%] bg-white flex")}>
-          className={cx(
-            "absolute inset-[5%] bg-white flex",
-            css`
-              z-index: 100;
-            `
-          )}
-        >
           <div className="relative flex flex-1">
-            {local.status === "loading" && <Loading note="listing-site" backdrop={false} />}
+            {local.status === "loading" && (
+              <Loading note="listing-site" backdrop={false} />
+            )}
 
             {(local.status === "ready" || local.group.length > 0) && (
               <SitePicker

app/web/src/nova/ed/panel/tree/node/item/name.tsx

@@ -100,13 +100,13 @@ const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
   if (name.startsWith("jsx:")) {
     return (
       <div className="flex items-center space-x-1">
-        <div className="flex text-purple-500 border border-purple-400 pr-1 items-center justify-center">
+        <div className="flex text-purple-500 space-x-[2px] border-r pr-1 items-center justify-center">
           <div
             dangerouslySetInnerHTML={{
               __html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
             }}
           ></div>
-          <div className="font-mono text-[9px]">JSX</div>
+          <div className="font-mono text-[8px]">JSX</div>
         </div>
         <div>{name.substring(4)}</div>
       </div>

app/web/src/utils/ui/modal.tsx

@@ -163,7 +163,6 @@ export const ModalContent = React.forwardRef<
           "modal-overlay",
           "flex items-center justify-center transition-all ",
           css`
-            z-index: 100;
             background: rgba(0, 0, 0, 0.3);
             display: grid;
             place-items: center;