From 4868fa7a399f1be7bd9ed4b59011b3183ef4f596 Mon Sep 17 00:00:00 2001
From: Rizky <rizky05@gmail.com>
Date: Tue, 23 Jan 2024 12:35:57 +0700
Subject: [PATCH] wip fix

---
 app/web/src/nova/ed/logic/ed-sync.tsx |  2 -
 app/web/src/nova/vi/preview.tsx       | 58 +++++++++++++++++++++------
 2 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/app/web/src/nova/ed/logic/ed-sync.tsx b/app/web/src/nova/ed/logic/ed-sync.tsx
index fb209272..4d0339f9 100644
--- a/app/web/src/nova/ed/logic/ed-sync.tsx
+++ b/app/web/src/nova/ed/logic/ed-sync.tsx
@@ -81,12 +81,10 @@ export const edInitSync = (p: PG) => {
             }
             p.ui.popup.code.loading = false;
 
-            console.log("mooko ");
             if (arg.src) {
               const w = window as any;
               const module = evalCJS(decoder.decode(decompress(arg.src)));
               p.global_prop = Object.keys(module);
-              console.log(module);
               if (typeof module === "object") {
                 for (const [k, v] of Object.entries(module)) {
                   w[k] = v;
diff --git a/app/web/src/nova/vi/preview.tsx b/app/web/src/nova/vi/preview.tsx
index 8532cf13..a1fc5ce9 100644
--- a/app/web/src/nova/vi/preview.tsx
+++ b/app/web/src/nova/vi/preview.tsx
@@ -15,18 +15,52 @@ export const ViPreview = (arg: { pathname: string }) => {
     return <Loading note={p.status + "-page"} />;
   }
 
+  const mode = p.mode;
+
   return (
-    <Vi
-      meta={p.page.meta}
-      api_url={p.site.config.api_url}
-      site_id={p.site.id}
-      page_id={p.page.cur.id}
-      entry={p.page.entry}
-      api={p.script.api}
-      db={p.script.db}
-      render_stat="disabled"
-      script={{ init_local_effect: p.script.init_local_effect }}
-    />
+    <div className={cx("relative flex flex-1 items-center justify-center")}>
+      <div
+        className={cx(
+          "absolute flex flex-col items-stretch flex-1 bg-white ",
+          mode === "mobile"
+            ? css`
+                @media (min-width: 768px) {
+                  border-left: 1px solid #ccc;
+                  border-right: 1px solid #ccc;
+                  width: 375px;
+                  top: 0px;
+                  overflow-x: hidden;
+                  overflow-y: auto;
+                  bottom: 0px;
+                }
+                @media (max-width: 767px) {
+                  left: 0px;
+                  right: 0px;
+                  top: 0px;
+                  bottom: 0px;
+                  overflow-y: auto;
+                }
+              `
+            : "inset-0 overflow-auto",
+
+          css`
+            contain: content;
+          `
+        )}
+      >
+        <Vi
+          meta={p.page.meta}
+          api_url={p.site.config.api_url}
+          site_id={p.site.id}
+          page_id={p.page.cur.id}
+          entry={p.page.entry}
+          api={p.script.api}
+          db={p.script.db}
+          render_stat="disabled"
+          script={{ init_local_effect: p.script.init_local_effect }}
+        />
+      </div>
+    </div>
   );
 };
 
@@ -37,7 +71,7 @@ const viRoute = async (p: PG) => {
     }
 
     if (!p.site.domain && !p.site.name) {
-      p.status = "loading";
+      p.status = "load-site";
       const site = await p.sync.site.load(p.site.id);
       if (!site) {
         p.status = "site-not-found";