From 3a58aa693a2e68771647c5b152156f497aa3be7c Mon Sep 17 00:00:00 2001
From: Alma <alma@MacBook-Air-de-Alma.local>
Date: Wed, 9 Apr 2025 13:12:50 +0200
Subject: [PATCH] update iframe rule

---
 app/components/responsive-iframe.tsx | 71 ++++++++++++++++++++++++++++
 app/design/page.tsx                  | 12 ++---
 app/flow/page.tsx                    |  9 ++--
 3 files changed, 79 insertions(+), 13 deletions(-)
 create mode 100644 app/components/responsive-iframe.tsx

diff --git a/app/components/responsive-iframe.tsx b/app/components/responsive-iframe.tsx
new file mode 100644
index 00000000..a3c0de65
--- /dev/null
+++ b/app/components/responsive-iframe.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+interface ResponsiveIframeProps {
+  src: string;
+  className?: string;
+  allow?: string;
+}
+
+export function ResponsiveIframe({ src, className = '', allow }: ResponsiveIframeProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const calculateHeight = () => {
+      const pageY = (elem: HTMLElement): number => {
+        return elem.offsetParent ? 
+          (elem.offsetTop + pageY(elem.offsetParent as HTMLElement)) : 
+          elem.offsetTop;
+      };
+
+      const height = document.documentElement.clientHeight;
+      const iframeY = pageY(iframe);
+      const newHeight = Math.max(0, height - iframeY);
+      iframe.style.height = `${newHeight}px`;
+    };
+
+    const handleHashChange = () => {
+      if (window.location.hash && window.location.hash.length) {
+        const iframeURL = new URL(iframe.src);
+        iframeURL.hash = window.location.hash;
+        iframe.src = iframeURL.toString();
+      }
+    };
+
+    // Initial setup
+    calculateHeight();
+    handleHashChange();
+
+    // Event listeners
+    window.addEventListener('resize', calculateHeight);
+    window.addEventListener('hashchange', handleHashChange);
+    iframe.addEventListener('load', calculateHeight);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('resize', calculateHeight);
+      window.removeEventListener('hashchange', handleHashChange);
+      iframe.removeEventListener('load', calculateHeight);
+    };
+  }, []);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      id="myFrame"
+      src={src}
+      className={`w-full border-none ${className}`}
+      style={{
+        display: 'block',
+        width: '100%',
+        height: '100%'
+      }}
+      allow={allow}
+      allowFullScreen
+    />
+  );
+} 
\ No newline at end of file
diff --git a/app/design/page.tsx b/app/design/page.tsx
index e28338e8..b487c066 100644
--- a/app/design/page.tsx
+++ b/app/design/page.tsx
@@ -1,6 +1,7 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);
@@ -11,15 +12,10 @@ export default async function Page() {
 
   return (
     <main className="w-full h-screen bg-black">
-      <div className="w-full h-full pt-12">
-        <iframe 
-          src={process.env.NEXT_PUBLIC_IFRAME_ARTLAB_URL}
-          className="w-full h-full border-none"
+      <div className="w-full h-full">
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_ARTLAB_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          style={{ 
-            marginTop: '-64px'
-          }}
-          allowFullScreen
         />
       </div>
     </main>
diff --git a/app/flow/page.tsx b/app/flow/page.tsx
index 9d126e5b..f07d95e7 100644
--- a/app/flow/page.tsx
+++ b/app/flow/page.tsx
@@ -1,6 +1,7 @@
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/app/api/auth/[...nextauth]/route";
 import { redirect } from "next/navigation";
+import { ResponsiveIframe } from "@/app/components/responsive-iframe";
 
 export default async function Page() {
   const session = await getServerSession(authOptions);
@@ -11,12 +12,10 @@ export default async function Page() {
 
   return (
     <main className="w-full h-screen bg-black">
-      <div className="w-full h-full pt-16">
-        <iframe 
-          src="https://agilite.slm-lab.net/oidc/login"
-          className="w-full h-full border-none"
+      <div className="w-full h-full">
+        <ResponsiveIframe 
+          src={process.env.NEXT_PUBLIC_IFRAME_FLOW_URL || ''}
           allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
         />
       </div>
     </main>