refactor: update domain warning layout

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>

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 BaseLayout = ({ children }: { children: React.ReactNode }) => {
-  const { backgroundImage, appUrl } = useAppContext();
+  const { backgroundImage } = useAppContext();
-  const [ignoreDomainWarning, setIgnoreDomainWarning] = useState(false);
-  const currentUrl = window.location.origin;
 
   return (
     <div
@@ -19,15 +17,41 @@ export const Layout = () => {
       }}
     >
       <LanguageSelector />
-      {appUrl !== currentUrl && !ignoreDomainWarning ? (
+      {children}
-        <DomainWarning
-          onClick={() => setIgnoreDomainWarning(true)}
-          appUrl={appUrl}
-          currentUrl={currentUrl}
-        />
-      ) : (
-        <Outlet />
-      )}
     </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>
+  );
+};

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 {