From e3e5d28a2a3ba8fed5f22f98fae3fbdab6f1c75e Mon Sep 17 00:00:00 2001
From: aaldebs99 <aaldebs99@gmail.com>
Date: Sat, 28 Jun 2025 04:33:35 +0000
Subject: [PATCH] feat(frontend): click to expand preview in document details

---
 frontend/src/pages/DocumentDetailsPage.tsx | 24 +++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/DocumentDetailsPage.tsx b/frontend/src/pages/DocumentDetailsPage.tsx
index 1a2055f..7c7a22c 100644
--- a/frontend/src/pages/DocumentDetailsPage.tsx
+++ b/frontend/src/pages/DocumentDetailsPage.tsx
@@ -345,15 +345,37 @@ const DocumentDetailsPage: React.FC = () => {
                   <img
                     src={thumbnailUrl}
                     alt={document.original_filename}
+                    onClick={handleViewDocument}
                     style={{
                       maxWidth: '100%',
                       maxHeight: '200px',
                       borderRadius: '8px',
                       objectFit: 'contain',
+                      cursor: 'pointer',
+                      transition: 'transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out',
+                    }}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.transform = 'scale(1.02)';
+                      e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)';
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.transform = 'scale(1)';
+                      e.currentTarget.style.boxShadow = 'none';
                     }}
                   />
                 ) : (
-                  getFileIcon(document.mime_type)
+                  <Box
+                    onClick={handleViewDocument}
+                    sx={{
+                      cursor: 'pointer',
+                      transition: 'transform 0.2s ease-in-out',
+                      '&:hover': {
+                        transform: 'scale(1.02)',
+                      }
+                    }}
+                  >
+                    {getFileIcon(document.mime_type)}
+                  </Box>
                 )}
               </Box>