From d18f4772143dc4e61f520f3b916e8932ea6f276f Mon Sep 17 00:00:00 2001
From: NotII <46204250+NotII@users.noreply.github.com>
Date: Tue, 18 Mar 2025 03:01:00 +0100
Subject: [PATCH] Update image-viewer-modal.tsx

---
 components/modals/image-viewer-modal.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/modals/image-viewer-modal.tsx b/components/modals/image-viewer-modal.tsx
index 57bab04..4835307 100644
--- a/components/modals/image-viewer-modal.tsx
+++ b/components/modals/image-viewer-modal.tsx
@@ -45,30 +45,32 @@ export function ImageViewerModal({ isOpen, onClose, imageUrl, onNavigate }: Imag
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="max-w-[90vw] max-h-[90vh] p-0 bg-transparent border-none">
-        <div className="relative w-full h-full">
+      <DialogContent className="p-0 border-none bg-black/80 max-w-[90vw] max-h-[90vh] [&>button]:text-white [&>button]:hover:text-gray-300 [&>button]:hover:bg-white/10 [&>button]:top-4 [&>button]:right-4">
+        <div className="relative w-[90vw] h-[90vh] mx-auto">
+          {/* Navigation buttons */}
           {onNavigate && (
             <>
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute left-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
+                className="absolute left-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
                 onClick={handleNavigation('prev')}
               >
-                <ChevronLeft size={24} />
+                <ChevronLeft size={32} />
               </Button>
               <Button
                 variant="ghost"
                 size="icon"
-                className="absolute right-4 top-1/2 -translate-y-1/2 text-white hover:text-gray-300 hover:bg-white/10"
+                className="absolute right-4 top-1/2 -translate-y-1/2 z-50 text-white hover:text-gray-300 hover:bg-white/10 w-12 h-12"
                 onClick={handleNavigation('next')}
               >
-                <ChevronRight size={24} />
+                <ChevronRight size={32} />
               </Button>
             </>
           )}
-          
-          <div className="relative w-full h-full min-h-[60vh] flex items-center justify-center">
+
+          {/* Image container */}
+          <div className="w-full h-full flex items-center justify-center p-4">
             <img
               src={imageUrl}
               alt="Full size image"