fix

app/srv/core/index.css

@@ -1698,6 +1698,11 @@ video {
   border-color: rgb(187 247 208 / var(--tw-border-opacity));
 }
 
+.border-green-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(34 197 94 / var(--tw-border-opacity));
+}
+
 .border-green-600 {
   --tw-border-opacity: 1;
   border-color: rgb(22 163 74 / var(--tw-border-opacity));

app/web/src/nova/ed/panel/header/right/responsive-toggle.tsx

@@ -8,7 +8,7 @@ import { treeRebuild } from "../../../logic/tree/build";
 export const ResponsiveToggle = () => {
   const p = useGlobal(EDGlobal, "EDITOR");
   const mode = p.mode;
-  const activeModeClassName = "border-b-2 border-blue-500";
+  let activeModeClassName = "border-b-2 border-blue-500";
 
   const render = () => {
     const code = p.code["site"]?.doc;
@@ -29,6 +29,10 @@ export const ResponsiveToggle = () => {
     localStorage.setItem("prasi-editor-mode", responsive);
   }
 
+  if (responsive) {
+    activeModeClassName = "border-b-2 border-green-500 bg-green-100";
+  }
+
   const box = {
     mobile: {
       onClick() {

app/web/src/nova/prod/root.tsx

@@ -177,6 +177,7 @@ export const Root = () => {
 
   let mobileCSS = "";
 
+  console.log(base.page.root.responsive, base.mode);
   if (base.page.root.responsive === "mobile") {
     base.mode = "mobile";
 

pkgs/web-utils/src/use-local.ts

@@ -17,7 +17,7 @@ export const useLocal = <T extends object>(
     },
     deps: (deps || []) as any[],
     ready: false,
-    _loading: {} as any, 
+    _loading: {} as any,
     lastRender: 0,
     lastRenderCount: 0,
     delayedRender: false,
@@ -59,6 +59,10 @@ export const useLocal = <T extends object>(
         }
 
         if (local.lastRenderCount > 300) {
+          setTimeout(() => {
+            local.lastRender = Date.now();
+            _render({});
+          }, 500);
           throw new Error(
             "local.render more than 300 times in less than 300ms"
           );