From d5686e1390599b8b026501a55a91be2d76ae1c93 Mon Sep 17 00:00:00 2001
From: Alexander Medvedev <lilalexmed@proton.me>
Date: Tue, 7 Apr 2026 09:26:44 +0200
Subject: [PATCH] chore: make so you can zoom screenshots

---
 src/App.css                |  8 ++++++++
 src/pages/PluginDetail.tsx | 13 +++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/src/App.css b/src/App.css
index 8022b77..5892952 100644
--- a/src/App.css
+++ b/src/App.css
@@ -469,6 +469,14 @@ h1, h2, h3 { font-weight: 900; letter-spacing: -1px; }
     flex-direction: column;
     gap: 0.75rem;
 }
+
+.btn-download-main {
+    width: 100%;       /* Makes it fill the entire sidebar width */
+    padding: 16px;     /* Optional: makes it slightly taller/chunkier */
+    font-size: 1rem;   /* Optional: makes the text more prominent */
+    margin-bottom: 12px; /* Spacing between this and the GitHub link */
+}
+
 .stat-item {
     font-size: 0.9rem;
     color: var(--text-muted);
diff --git a/src/pages/PluginDetail.tsx b/src/pages/PluginDetail.tsx
index b885bc6..e6af0f7 100644
--- a/src/pages/PluginDetail.tsx
+++ b/src/pages/PluginDetail.tsx
@@ -70,6 +70,7 @@ const PluginDetail = () => {
   const [reviewForm, setReviewForm] = useState({ rating: 5, comment: '' });
   const [adShown, setAdShown] = useState(false);
   const [mainScreenshot, setMainScreenshot] = useState<string | null>(null);
+  const [lightboxImage, setLightboxImage] = useState<string | null>(null);
   const [selectedLanguage] = useState('en');
   const [currentDescription, setCurrentDescription] = useState('');
   const [setLoading] = useState(true);
@@ -350,6 +351,8 @@ const PluginDetail = () => {
                 src={mainScreenshot || plugin.screenshots[0].path}
                 alt="Main"
                 className="main-screenshot"
+                style={{ cursor: 'zoom-in' }} // Suggests it can be expanded
+                onClick={() => setLightboxImage(mainScreenshot || plugin.screenshots[0].path)}
               />
               <div className="thumbnail-strip">
                 {plugin.screenshots.map((shot: any) => (
@@ -604,6 +607,16 @@ const PluginDetail = () => {
           </div>
         </aside>
       </div>
+
+      {/* LIGHTBOX MODAL */}
+      {lightboxImage && (
+        <div className="lightbox-overlay" onClick={() => setLightboxImage(null)}>
+          <div className="lightbox-content">
+            <img src={lightboxImage} alt="Expanded" />
+            <button className="lightbox-close">×</button>
+          </div>
+        </div>
+      )}
     </div>
   );
 };