fix weird overlay

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>
   );
 }

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() {
+export default function PictureCarousel({
-  const [selectedImage, setSelectedImage] = useState<string>("");
+  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="whitespace-nowrap overflow-x-auto">
         <div className="my-2 space-x-2">
           {images.map((v, k) => {
-              return (
+            return <Picture key={k} image={v} onClick={() => onClick(v)} />;
-                <Picture
-                  key={k}
-                  image={v}
-                  onClick={() => setSelectedImage(v)}
-                />
-              );
           })}
         </div>
       </div>
     </div>
-    </>
   );
 }

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">