adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Slideshow layout shift affecting Chat during image transitions
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 55s
Details

Browse Source 
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>
This commit is contained in:
Adam French
2026-03-25 03:16:28 +00:00
parent 8c2e9ba9a5
commit 2b84730126
1 changed files with 4 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nginx/vue/src/components/util/Slideshow.vue
View File

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