fix

app/gallery/admin/view/page.tsx

@@ -21,6 +21,9 @@ function PageComponent() {
     const [fileNames, setFileNames] = useState<string[]>([]);
     const [selectedTags, setSelectedTags] = useState<string[]>([]);
 
+    const [open, setOpen] = useState<boolean>(false);
+
+
     const [images, setImages] = useState<string[]>([]);
     const getData = async () => {
         const urlParams = new URLSearchParams(window.location.search);
@@ -127,7 +130,7 @@ function PageComponent() {
                             key={"galleryThumbnail"+galleryName+"-"+tags.join("")}
                             id={originalName}
                             columns={3}
-                            onSelect={function (id: string, columns: number): void {}}
+                            onSelect={function (id: string, columns: number): void { setOpen(true) }}
                             title={galleryName}
                             subscription={tier}
                             tags={tags}
@@ -210,22 +213,30 @@ function PageComponent() {
                     )}
                     </div>
                 </div>
-                <div className="w-full flex opacity-90 backdrop-blur-lg bg-primary  shadow-lg p-8 pt-0 rounded">
-                    
-                            <Masonry
-                                breakpointCols={3}
-                                className="my-masonry-grid pl-6 "
+            {(open) && (
+                <>
+                {/*
+                    This is the modal for holding the gallery
+                */}
+                <div
+                className={`fixed inset-0 transition-opacity z-30 animate-in`}
+                aria-hidden="true"
                 >
-                                {images.map((image, index) => (
-                                        <img
-                                        key={index}
-                                            src={image}
-                                            className={`animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse hover:scale-105 p-2 cursor-pointer my-2 transition-all opacity-100 duration-500 ease-in-out transform`}
-                                        />
-                                    ))}
-                            </Masonry>
+                <div
+                    className="absolute inset-0 bg-secondary-dark opacity-70 z-30"
+                    onClick={() => setOpen(true)}
+                ></div>
+                <div className="absolute inset-0 overflow-y-auto overflow-x-hidden no-scrollbar pt-2 w-full p-20 z-30">
+                    <Gallery
+                    id={gallery.name}
+                    columns={3}
+                    closeMenu={() => setOpen(false)}
+                    ></Gallery>
                 </div>
                 </div>
+                </>
+            )}
+            </div>
         </div>
     );
 }

components/neroshitron/gallery.tsx

@@ -114,7 +114,7 @@ const Gallery = ({ id, columns, closeMenu }: GalleryProps) => {
                 <div className='grid grid-cols-5 pl-4 gap-4 pr-4'>
                     <button
                         className={`justify-center text-center w-full animate-in animate-once animate-duration-1000 animate-ease-out animate-reverse mb-4 py-2 px-4 rounded-lg no-underline flex items-center z-50 bg-error hover:bg-error-light`}
-                        onClick={() => back_page()}
+                        onClick={() => close()}
                     >
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
                             <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />