From 2b84730126765768ae937c821033d89eedafed4c Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Wed, 25 Mar 2026 03:16:28 +0000
Subject: [PATCH] Fix Slideshow layout shift affecting Chat during image
 transitions

Use CSS grid stacking instead of absolute positioning so both
entering and leaving images occupy the same grid cell, keeping the
container height stable during crossfade transitions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 nginx/vue/src/components/util/Slideshow.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/nginx/vue/src/components/util/Slideshow.vue b/nginx/vue/src/components/util/Slideshow.vue
index 0de0273..f9b00db 100644
--- a/nginx/vue/src/components/util/Slideshow.vue
+++ b/nginx/vue/src/components/util/Slideshow.vue
@@ -49,33 +49,27 @@ onUnmounted(() => {
 
 <style scoped>
 .slideshow-wrapper {
-    position: relative;
+    display: grid;
     width: 100%;
-    height: 100%;
+    overflow: hidden;
 }
 
 .image-viewer {
+    grid-area: 1 / 1;
     width: 100%;
-    height: 100%;
     overflow: hidden;
 }
 
 img {
     width: 100%;
-    height: 100%;
     object-fit: cover;
+    display: block;
 }
 
 .fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.5s ease;
 }
-.fade-leave-active {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-}
 .fade-enter-from,
 .fade-leave-to {
     opacity: 0;