Oliver/nano-pro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix CSS conflict - conversation history now actually compact

Browse source 
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>
This commit is contained in:
DJP 2025-12-16 09:16:31 -05:00
parent 0f8b82aca6
commit c5c28da8af
1 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.php
View file

@ -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>