From c5c28da8afd3829db83c7b676df181fa64b35ef9 Mon Sep 17 00:00:00 2001
From: DJP <DJP>
Date: Tue, 16 Dec 2025 09:16:31 -0500
Subject: [PATCH] Fix CSS conflict - conversation history now actually compact
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problem: Both conversation history and image gallery used .history-item class
Result: Conversation boxes were forced to square aspect-ratio (1:1)

Solution:
- Renamed image gallery class: .history-item → .history-image-item
- Renamed overlay class: .history-item-overlay → .history-image-overlay
- Conversation history keeps .history-item (now properly compact)

Now Working:
- Conversation history: Single-line compact items
- Image gallery: Square thumbnails as intended
- No CSS conflicts between the two

The conversation history boxes are now actually compact instead of
just having centered text in big square boxes!

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
---
 index.php | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/index.php b/index.php
index 1df4dcd..10ad1ca 100644
--- a/index.php
+++ b/index.php
@@ -635,7 +635,7 @@ $imageHistory = $sessionManager->getImageHistory();
             gap: 15px;
         }
 
-        .history-item {
+        .history-image-item {
             position: relative;
             background: #000;
             border: 2px solid #333;
@@ -646,20 +646,20 @@ $imageHistory = $sessionManager->getImageHistory();
             aspect-ratio: 1;
         }
 
-        .history-item:hover {
+        .history-image-item:hover {
             border-color: #FFC407;
             transform: translateY(-5px);
             box-shadow: 0 5px 20px rgba(255, 196, 7, 0.3);
         }
 
-        .history-item img {
+        .history-image-item img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
         }
 
-        .history-item-overlay {
+        .history-image-overlay {
             position: absolute;
             bottom: 0;
             left: 0;
@@ -672,7 +672,7 @@ $imageHistory = $sessionManager->getImageHistory();
             transition: opacity 0.3s;
         }
 
-        .history-item:hover .history-item-overlay {
+        .history-image-item:hover .history-image-overlay {
             opacity: 1;
         }
 
@@ -953,9 +953,9 @@ $imageHistory = $sessionManager->getImageHistory();
                             $historyImage = $sessionManager->getImage($historyItem['filename']);
                             if ($historyImage):
                         ?>
-                        <div class="history-item" onclick="downloadHistoryImage('<?php echo addslashes($historyImage['data']); ?>', '<?php echo $historyImage['mime_type']; ?>', <?php echo $historyItem['timestamp']; ?>)">
+                        <div class="history-image-item" onclick="downloadHistoryImage('<?php echo addslashes($historyImage['data']); ?>', '<?php echo $historyImage['mime_type']; ?>', <?php echo $historyItem['timestamp']; ?>)">
                             <img src="data:<?php echo $historyImage['mime_type']; ?>;base64,<?php echo $historyImage['data']; ?>" alt="Generated <?php echo date('g:i A', $historyItem['timestamp']); ?>">
-                            <div class="history-item-overlay">
+                            <div class="history-image-overlay">
                                 <?php echo date('g:i A', $historyItem['timestamp']); ?>
                             </div>
                         </div>