From d33fce46b1c5fdb39fa557ce468ee9b19e88b381 Mon Sep 17 00:00:00 2001
From: Alex Frantz <alex@alexav.gg>
Date: Fri, 7 Nov 2025 01:47:18 -0500
Subject: [PATCH] fix weird overlay

---
 src/components/Overlay.tsx                 |  4 +--
 src/components/modules/PictureCarousel.tsx | 40 +++++++---------------
 src/pages/App.tsx                          | 20 +++++++++--
 3 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/components/Overlay.tsx b/src/components/Overlay.tsx
index c4f2cd7..a9403cc 100644
--- a/src/components/Overlay.tsx
+++ b/src/components/Overlay.tsx
@@ -10,9 +10,9 @@ export default function Overlay({
   return (
     <div
       onClick={onClose}
-      className="absolute bg-black/50 min-h-screen w-full z-1 overflow-hidden flex justify-center items-center"
+      className="absolute bg-black/50 w-full h-full z-1 overflow-hidden flex justify-center items-center"
     >
-      <div className="max-w-fit max-h-fit">{children}</div>
+      {children}
     </div>
   );
 }
diff --git a/src/components/modules/PictureCarousel.tsx b/src/components/modules/PictureCarousel.tsx
index 9945511..17836e8 100644
--- a/src/components/modules/PictureCarousel.tsx
+++ b/src/components/modules/PictureCarousel.tsx
@@ -1,5 +1,3 @@
-import { useState } from "react";
-import Overlay from "../Overlay";
 import Picture from "../Picture";
 
 const images = [
@@ -10,34 +8,22 @@ const images = [
   "https://storage.alexav.gg/content/2f36c1dd-eaf8-4fd3-a3cd-1d25fe8f5a07.jpg",
 ];
 
-export default function PictureCarousel() {
-  const [selectedImage, setSelectedImage] = useState<string>("");
-
+export default function PictureCarousel({
+  onClick,
+}: {
+  onClick: (url: string) => void;
+}) {
   return (
-    <>
-      {selectedImage !== "" && (
-        <Overlay onClose={() => setSelectedImage("")}>
-          <img width="400" height="400" src={selectedImage} />
-        </Overlay>
-      )}
+    <div className="border border-white border-solid rounded-lg p-2">
+      <h1 className="text-2xl font-bold italic">pictures</h1>
 
-      <div className="border border-white border-solid rounded-lg p-2">
-        <h1 className="text-2xl font-bold italic">pictures</h1>
-
-        <div className="whitespace-nowrap overflow-x-auto">
-          <div className="my-2 space-x-2">
-            {images.map((v, k) => {
-              return (
-                <Picture
-                  key={k}
-                  image={v}
-                  onClick={() => setSelectedImage(v)}
-                />
-              );
-            })}
-          </div>
+      <div className="whitespace-nowrap overflow-x-auto">
+        <div className="my-2 space-x-2">
+          {images.map((v, k) => {
+            return <Picture key={k} image={v} onClick={() => onClick(v)} />;
+          })}
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index a92b471..812776c 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -1,4 +1,6 @@
+import { useState } from "react";
 import Layout from "../components/Layout";
+import Overlay from "../components/Overlay";
 import MusicComponent from "../components/MusicComponent";
 import TVComponent from "../components/TVComponent";
 import GameComponent from "../components/GameComponent";
@@ -6,14 +8,28 @@ import FantasyStatus from "../components/FantasyStatus";
 import PictureCarousel from "../components/modules/PictureCarousel";
 
 export default function App() {
+  const [selectedImage, setSelectedImage] = useState<string>("");
+
   return (
     <Layout>
+      {selectedImage !== "" && (
+        <Overlay onClose={() => setSelectedImage("")}>
+          <img
+            draggable={false}
+            className="select-none"
+            width="400"
+            height="400"
+            src={selectedImage}
+          />
+        </Overlay>
+      )}
+
       <div className="my-2 space-y-4">
+        <PictureCarousel onClick={(url) => setSelectedImage(url)} />
+
         <div className="border border-white border-solid p-2 rounded-lg flex justify-between">
           <h1 className="text-2xl font-bold">welcome to my site !</h1>
         </div>
-
-        <PictureCarousel />
         <GameComponent />
 
         <div className="border border-white border-solid rounded-lg p-2">