seeing if this fixes it

src/components/Art.tsx

@@ -9,6 +9,9 @@ interface AsciiArtComponentProps {
 const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
   const [asciiArt, setAsciiArt] = createSignal("");
   const [scale, setScale] = createSignal(1);
+  const [windowWidth, setWindowWidth] = createSignal(
+    typeof window !== "undefined" ? window.innerWidth : 1024,
+  );
 
   const imageToAscii = (
     img: HTMLImageElement,
@@ -46,46 +49,63 @@ const AsciiArtComponent: Component<AsciiArtComponentProps> = (props) => {
   };
 
   onMount(() => {
-    const img = new Image();
-    img.src = props.imagePath;
-    img.onload = () => {
-      setAsciiArt(
-        imageToAscii(img, props.maxWidth ?? 500, props.maxHeight ?? 1000),
-      );
-    };
-
-    const handleResize = () => {
-      setScale(window.devicePixelRatio || 1);
-    };
+    // Only run client-side code if window is available
+    if (typeof window !== "undefined") {
+      const img = new Image();
+      img.src = props.imagePath;
+      img.onload = () => {
+        setAsciiArt(
+          imageToAscii(img, props.maxWidth ?? 500, props.maxHeight ?? 1000),
+        );
+      };
 
-    handleResize();
+      const handleResize = () => {
+        setScale(window.devicePixelRatio || 1);
+        setWindowWidth(window.innerWidth);
+      };
 
-    window.addEventListener("resize", handleResize);
-    window.addEventListener("zoom", handleResize);
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      window.addEventListener("zoom", handleResize);
 
-    onCleanup(() => {
-      window.removeEventListener("resize", handleResize);
-      window.removeEventListener("zoom", handleResize);
-    });
+      onCleanup(() => {
+        window.removeEventListener("resize", handleResize);
+        window.removeEventListener("zoom", handleResize);
+      });
+    }
   });
 
+  // Responsive font sizing logic
+  const calculateFontSize = () => {
+    const width = windowWidth();
+    if (width < 640) {
+      return `${2.3 / scale()}px`;
+    } else if (width < 768) {
+      return `${2.4 / scale()}px`;
+    }
+    return `${2.5 / scale()}px`;
+  };
+
   return (
     <div
-      class="ascii-art-container absolute text-center text-rose-700 md:text-rose-800/90"
+      class="ascii-art-container absolute text-center text-rose-700 md:text-rose-800/90 overflow-hidden"
       style={{
-        "font-size": `${2.5 / scale()}px`,
+        "font-size": calculateFontSize(),
         "line-height": `${1.2 / scale()}px`,
         "letter-spacing": `0`,
         "font-family": "monospace",
         "white-space": "pre",
+        "max-width": "100%",
+        "overflow-x": "auto",
         display: "inline-block",
       }}
     >
       <pre
-        class="ascii-art select-none"
+        class="ascii-art select-none overflow-hidden"
         style={{
           margin: "0",
           padding: "0",
+          "min-width": "100%",
         }}
       >
         {asciiArt()}

src/routes/index.tsx

@@ -3,29 +3,42 @@ import Art from "../components/Art";
 export default function Home() {
   return (
     <div class="w-full flex justify-center overflow-x-hidden">
-      <div class="h-screen w-full p-6 md:w-2/3 flex flex-col items-center justify-center">
+      <div class="min-h-screen w-full p-6 md:w-2/3 flex flex-col items-center justify-center">
         <Art imagePath="/imagewbg.png" />
         <div class="flex w-full items-center gap-4">
           <img src="/image.png" alt="logo" class="h-12" />
           <h1 class="text-white text-2xl md:text-3xl font-bold">Flora</h1>
         </div>
-        <p class="text-white z-[10] self-start text-left text-lg md:text-xl leading-8 mt-6 mb-3">Flora is a team of developers aiming to create practical and useful solutions for real problems.</p>
+        <p class="text-white z-[10] self-start text-left text-lg md:text-xl leading-8 mt-6 mb-3">
+          Flora is a team of developers aiming to create practical and useful
+          solutions for real problems.
+        </p>
         <div class="text-white z-[400] text-left self-start text-lg md:text-xl leading-8">
           Our current projects:{" "}
           <div class="inline-block group relative">
             <a href="https://orchid.rex.wf">orchid</a>
-            <img src="/orchid.png" class="absolute scale-[5] lg:scale-[9] z-[500] md:group-hover:opacity-100 opacity-0 transition pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[2rem] lg:left-[4rem]" alt="" />
+            <img
+              src="/orchid.png"
+              class="absolute scale-[5] lg:scale-[9] z-[500] md:group-hover:opacity-100 opacity-0 transition pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[2rem] lg:left-[4rem]"
+              alt=""
+            />
           </div>{" "}
           and{" "}
           <div class="inline-block group relative">
             <a href="#">aster</a>
-            <img src="/aster.png" class="absolute scale-[7] lg:scale-[11] z-[500] md:group-hover:opacity-100 opacity-0 transition pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[-4rem] lg:left-[4rem]" alt="" />
+            <img
+              src="/aster.png"
+              class="absolute scale-[7] lg:scale-[11] z-[500] md:group-hover:opacity-100 opacity-0 transition pointer-events-none top-[5rem] lg:top-[8.8rem] my-2 left-[-4rem] lg:left-[4rem]"
+              alt=""
+            />
           </div>
           {"."}
         </div>
         <div class="divider px-2 pt-[1px] bg-neutral-800 my-3"></div>
         <p class="text-sm text-left self-start z-[10]">
-          Founded by <a href="https://namishh.me">nam</a> and <a href="https://rex.wf">rex</a>. Follow us on <a href="https://github.com/floraorg">GitHub</a>.
+          Founded by <a href="https://namishh.me">nam</a> and{" "}
+          <a href="https://rex.wf">rex</a>. Follow us on{" "}
+          <a href="https://github.com/floraorg">GitHub</a>.
         </p>
       </div>
     </div>