From 48446f972239962cb35d1ecc8ce3d728a5ebc2a5 Mon Sep 17 00:00:00 2001
From: mindesbunister <github_service@egonetix.de>
Date: Thu, 17 Jul 2025 15:05:33 +0200
Subject: [PATCH] feat: Optimize screenshot gallery layout for 2-timeframe
 analysis

- Add adaptive grid layout that adjusts based on number of screenshots
- 2 screenshots: side-by-side view with larger aspect ratio for better comparison
- 1 screenshot: centered layout with max-width constraint
- 3-4+ screenshots: responsive multi-column grid
- Add 'Side-by-Side View' indicator for 2-screenshot layout
- Improve aspect ratios for better chart visibility and comparison
- Enhance user experience for multi-timeframe analysis
---
 components/ScreenshotGallery.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/components/ScreenshotGallery.tsx b/components/ScreenshotGallery.tsx
index 660a8d7..b85cc23 100644
--- a/components/ScreenshotGallery.tsx
+++ b/components/ScreenshotGallery.tsx
@@ -157,24 +157,39 @@ export default function ScreenshotGallery({
               📸
             </span>
             Chart Screenshots
+            {sortedData.length === 2 && (
+              <span className="ml-2 text-xs bg-purple-500/20 text-purple-300 px-2 py-1 rounded-full border border-purple-500/30">
+                Side-by-Side View
+              </span>
+            )}
           </h4>
           <div className="text-xs text-gray-400">
             {sortedData.length} captured • Click to enlarge
           </div>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <div className={`grid gap-4 ${
+          sortedData.length === 1 ? 'grid-cols-1 max-w-md mx-auto' :
+          sortedData.length === 2 ? 'grid-cols-1 md:grid-cols-2' :
+          sortedData.length === 3 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' :
+          sortedData.length === 4 ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4' :
+          'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+        }`}>
           {sortedData.map((item, displayIndex) => {
             const imageUrl = formatScreenshotUrl(item.screenshot)
             
             return (
               <div 
                 key={displayIndex}
-                className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
+                className={`group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02] ${
+                  sortedData.length === 2 ? 'lg:aspect-[4/3]' : ''
+                }`}
                 onClick={() => onImageClick(imageUrl)}
               >
                 {/* Preview Image */}
-                <div className="aspect-video bg-gray-800 flex items-center justify-center relative">
+                <div className={`bg-gray-800 flex items-center justify-center relative ${
+                  sortedData.length === 2 ? 'aspect-[16/10] lg:aspect-[4/3]' : 'aspect-video'
+                }`}>
                   <img
                     src={imageUrl}
                     alt={`${symbol} - ${item.displayLayout} - ${item.displayTimeframe} chart`}