From 7d2d3dccf555030878c147200cdc8b442e25ca9d Mon Sep 17 00:00:00 2001
From: Manus <manus@manus.im>
Date: Tue, 30 Dec 2025 04:20:53 -0500
Subject: [PATCH 1/3] fix: improve image preview efficiency by displaying 8
 images instead of 4

- Increase initial image display from 4 to 8 images
- Add responsive layout for large screens (lg:w-[calc(12.5%-0.5rem)])
- Update 'more' indicator to show at 8th image with remaining count
- Maintain glassmorphic styling and motion animations

This change reduces the number of clicks needed to browse images
while preserving the visual aesthetic of the glassmorphic UI.
---
 components/search-results-image.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/search-results-image.tsx b/components/search-results-image.tsx
index 50229d01..d34f96e6 100644
--- a/components/search-results-image.tsx
+++ b/components/search-results-image.tsx
@@ -63,11 +63,11 @@ export const SearchResultsImageSection: React.FC<
 
   return (
     <div className="flex flex-wrap gap-2">
-      {images.slice(0, 4).map((image: any, index: number) => (
+      {images.slice(0, 8).map((image: any, index: number) => (
         <Dialog key={index}>
           <DialogTrigger asChild>
             <motion.div
-              className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
+              className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] lg:w-[calc(12.5%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
               onClick={() => setSelectedIndex(index)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
@@ -88,9 +88,10 @@ export const SearchResultsImageSection: React.FC<
                   )}
                 </CardContent>
               </Card>
-              {index === 3 && images.length > 4 && (
+              {index === 7 && images.length > 8 && (
                 <div className="absolute inset-0 bg-black/30 rounded-md flex items-center justify-center text-white/80 text-sm">
                   <PlusCircle size={24} />
+                  <span className="ml-1">+{images.length - 8}</span>
                 </div>
               )}
             </motion.div>

From d15c4c52d0dc4b2cbf430b3d774dbe30b292da6f Mon Sep 17 00:00:00 2001
From: Manus <manus@manus.im>
Date: Tue, 30 Dec 2025 04:29:58 -0500
Subject: [PATCH 2/3] fix: correct responsive layout to prevent image rendering
 issues

Previous commit used lg:w-[calc(12.5%-0.5rem)] which made images too narrow
(12.5% width = 1/8th) causing rendering failures.

New responsive layout:
- Mobile: 50% width (2 columns, 2 images/row)
- Tablet (md): 33.333% width (3 columns, 3 images/row)
- Desktop (lg): 25% width (4 columns, 4 images/row)

This displays 8 images total (2 rows on desktop) while maintaining
proper image dimensions and aspect ratios for correct rendering.
---
 components/search-results-image.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/search-results-image.tsx b/components/search-results-image.tsx
index d34f96e6..d92d7e62 100644
--- a/components/search-results-image.tsx
+++ b/components/search-results-image.tsx
@@ -67,7 +67,7 @@ export const SearchResultsImageSection: React.FC<
         <Dialog key={index}>
           <DialogTrigger asChild>
             <motion.div
-              className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] lg:w-[calc(12.5%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
+              className="w-[calc(50%-0.5rem)] md:w-[calc(33.333%-0.5rem)] lg:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
               onClick={() => setSelectedIndex(index)}
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}

From f358ec30fb8c12e5d2c3134d4c15ec507a1b9a1d Mon Sep 17 00:00:00 2001
From: Manus <manus@manus.im>
Date: Tue, 30 Dec 2025 05:04:44 -0500
Subject: [PATCH 3/3] revert: restore original efficient row-based image
 preview layout

Complete revert of glassmorphic UI changes (commit ef8f8f3) to restore
the original efficient image preview behavior.

Changes:
- Removed glassmorphic styling and CSS import
- Removed framer-motion animations (whileHover, whileTap)
- Restored simple div wrapper instead of motion.div
- Removed 'glassmorphic' class from components
- Kept original 4-image display with 2x2 grid (mobile) / 1x4 row (desktop)

This restores the efficient row-based preview that allows users to see
multiple images at once without requiring interaction, matching the
layout pattern used by video-search-results.tsx component.
---
 components/search-results-image.tsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

diff --git a/components/search-results-image.tsx b/components/search-results-image.tsx
index d92d7e62..26167d68 100644
--- a/components/search-results-image.tsx
+++ b/components/search-results-image.tsx
@@ -20,8 +20,6 @@ import {
 } from '@/components/ui/carousel'
 import { useEffect, useState } from 'react'
 import { PlusCircle } from 'lucide-react'
-import { motion } from 'framer-motion'
-import 'glassmorphic/glassmorphic.css'
 
 interface SearchResultsImageSectionProps {
   images: string[]
@@ -63,14 +61,12 @@ export const SearchResultsImageSection: React.FC<
 
   return (
     <div className="flex flex-wrap gap-2">
-      {images.slice(0, 8).map((image: any, index: number) => (
+      {images.slice(0, 4).map((image: any, index: number) => (
         <Dialog key={index}>
           <DialogTrigger asChild>
-            <motion.div
-              className="w-[calc(50%-0.5rem)] md:w-[calc(33.333%-0.5rem)] lg:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative glassmorphic"
+            <div
+              className="w-[calc(50%-0.5rem)] md:w-[calc(25%-0.5rem)] aspect-video cursor-pointer relative"
               onClick={() => setSelectedIndex(index)}
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
             >
               <Card className="flex-1 h-full">
                 <CardContent className="p-2 h-full w-full">
@@ -88,15 +84,14 @@ export const SearchResultsImageSection: React.FC<
                   )}
                 </CardContent>
               </Card>
-              {index === 7 && images.length > 8 && (
+              {index === 3 && images.length > 4 && (
                 <div className="absolute inset-0 bg-black/30 rounded-md flex items-center justify-center text-white/80 text-sm">
                   <PlusCircle size={24} />
-                  <span className="ml-1">+{images.length - 8}</span>
                 </div>
               )}
-            </motion.div>
+            </div>
           </DialogTrigger>
-          <DialogContent className="sm:max-w-3xl max-h-[80vh] overflow-auto glassmorphic">
+          <DialogContent className="sm:max-w-3xl max-h-[80vh] overflow-auto">
             <DialogHeader>
               <DialogTitle>Search Images</DialogTitle>
               <DialogDescription className="text-sm">{query}</DialogDescription>