From d9fda75d412a3ed30d671e99d2826cfdfe36d9f3 Mon Sep 17 00:00:00 2001
From: Stavros <steveiliop56@gmail.com>
Date: Mon, 1 Sep 2025 14:43:39 +0300
Subject: [PATCH] refactor: update domain warning layout

---
 .../domain-warning/domain-warning.tsx         |  2 +-
 frontend/src/components/layout/layout.tsx     | 50 ++++++++++++++-----
 frontend/src/index.css                        |  2 +-
 3 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/domain-warning/domain-warning.tsx b/frontend/src/components/domain-warning/domain-warning.tsx
index 10c836e..dfa061d 100644
--- a/frontend/src/components/domain-warning/domain-warning.tsx
+++ b/frontend/src/components/domain-warning/domain-warning.tsx
@@ -28,7 +28,7 @@ export const DomainWarning = (props: Props) => {
       </CardHeader>
       <CardFooter className="flex flex-col items-stretch">
         <Button onClick={onClick} variant="warning">
-          Continue
+          Ignore
         </Button>
       </CardFooter>
     </Card>
diff --git a/frontend/src/components/layout/layout.tsx b/frontend/src/components/layout/layout.tsx
index e14e015..0ed0b39 100644
--- a/frontend/src/components/layout/layout.tsx
+++ b/frontend/src/components/layout/layout.tsx
@@ -4,10 +4,8 @@ import { Outlet } from "react-router";
 import { useState } from "react";
 import { DomainWarning } from "../domain-warning/domain-warning";
 
-export const Layout = () => {
-  const { backgroundImage, appUrl } = useAppContext();
-  const [ignoreDomainWarning, setIgnoreDomainWarning] = useState(false);
-  const currentUrl = window.location.origin;
+const BaseLayout = ({ children }: { children: React.ReactNode }) => {
+  const { backgroundImage } = useAppContext();
 
   return (
     <div
@@ -19,15 +17,41 @@ export const Layout = () => {
       }}
     >
       <LanguageSelector />
-      {appUrl !== currentUrl && !ignoreDomainWarning ? (
-        <DomainWarning
-          onClick={() => setIgnoreDomainWarning(true)}
-          appUrl={appUrl}
-          currentUrl={currentUrl}
-        />
-      ) : (
-        <Outlet />
-      )}
+      {children}
     </div>
   );
 };
+
+export const Layout = () => {
+  const { appUrl } = useAppContext();
+  const [ignoreDomainWarning, setIgnoreDomainWarning] = useState(false);
+  const currentUrl = window.location.origin;
+  const sessionIgnore = window.sessionStorage.getItem("ignoreDomainWarning");
+
+  const handleIgnore = () => {
+    window.sessionStorage.setItem("ignoreDomainWarning", "true");
+    setIgnoreDomainWarning(true);
+  };
+
+  if (
+    !ignoreDomainWarning &&
+    appUrl !== currentUrl &&
+    sessionIgnore !== "true"
+  ) {
+    return (
+      <BaseLayout>
+        <DomainWarning
+          appUrl={appUrl}
+          currentUrl={currentUrl}
+          onClick={() => handleIgnore()}
+        />
+      </BaseLayout>
+    );
+  }
+
+  return (
+    <BaseLayout>
+      <Outlet />
+    </BaseLayout>
+  );
+};
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 0b1ee02..9701636 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -156,7 +156,7 @@ ul {
 }
 
 code {
-  @apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold;
+  @apply relative rounded bg-muted px-[0.2rem] py-[0.1rem] font-mono text-sm font-semibold break-all;
 }
 
 .lead {