feat: Removed iframe and moved to container queries

Author: iduspara

src/components/form-builder/dialogs/open-json-dialog.tsx

@@ -59,7 +59,7 @@ export function OpenJsonDialog() {
             Paste your form JSON code here. The JSON should be an array of rows with components.
           </DialogDescription>
         </DialogHeader>
-        <div className="min-h-[500px] w-full overflow-y-auto flex flex-col gap-4">
+        <div className="h-[500px] w-full overflow-y-auto flex flex-col gap-4">
           <Textarea
             value={jsonInput}
             onChange={(e) => setJsonInput(e.target.value)}

src/components/form-builder/helpers/iframe.tsx

@@ -3,7 +3,6 @@
 import { useFormBuilderStore } from "@/stores/form-builder-store";
 import { useEffect, useRef, useMemo, memo } from "react";
 import GenerateEditor from "./canvas/generate-editor";
-import { IFrame } from "./helpers/iframe";
 import { Pre } from "@/components/ui/pre";
 import { generateJsonSchema } from "./helpers/generate-json";
 import { cn } from "@/lib/utils";
@@ -12,9 +11,9 @@ import { Card } from "../ui/card";
 
 // Memoize static viewport styles
 const viewportEditorStyles = {
-  sm: "w-[320px]",
-  md: "w-[768px]",
-  lg: "w-[1024px]",
+  sm: "w-[370px]",
+  md: "w-[818px]",
+  lg: "w-[1074px]",
 } as const;
 
 // Memoize the JSON preview component
@@ -80,22 +79,18 @@ export function MainCanvas() {
           }
         }}
       >
-        <IFrame
-          ref={editorIframeRef}
-          className={cn(`${viewportEditorStyles[viewport]}`, "mx-auto")}
-          onClick={() => {
-            if (selectedComponent) {
-              selectComponent(null);
-              selectRow(null);
-            }
-          }}
+        <Card
+          className={cn(
+            'transition-all duration-300',
+            `${viewportEditorStyles[viewport]}`,
+            "mx-auto scrollbar-hide mt-6"
+          )}
         >
-          <Card className="mt-6">
-            <CardContent>
-              <GenerateEditor />
-            </CardContent>
-          </Card>
-        </IFrame>
+          <CardContent className="@container">
+            <GenerateEditor />
+          </CardContent>
+        </Card>
+        
       </div>
       {showJson && <JsonPreview rows={rows} />}
     </div>