From 1578a057626cdc0cd04583f7696be8df8a8f5a72 Mon Sep 17 00:00:00 2001
From: Adam French <adam.a.french@outlook.com>
Date: Mon, 9 Mar 2026 12:07:05 +0000
Subject: [PATCH] Remove extra whitespace on CV.vue and stopped height becoming
 0 on image transitions

---
 nginx/vue/src/components/util/Slideshow.vue | 31 +++++++++++++++------
 nginx/vue/src/views/CV/CV.vue               |  5 ----
 nginx/vue/src/views/home/Listening.vue      | 22 +++++++++++----
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/nginx/vue/src/components/util/Slideshow.vue b/nginx/vue/src/components/util/Slideshow.vue
index 6f255e5..8593e93 100644
--- a/nginx/vue/src/components/util/Slideshow.vue
+++ b/nginx/vue/src/components/util/Slideshow.vue
@@ -35,19 +35,28 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <Transition name="fade" mode="out-in">
-        <div class="image-viewer" @click="nextImage" :key="currentIndex">
-            <Header v-if="currentComment">
-                {{ currentComment }}
-            </Header>
-            <img :src="currentUrl" alt="Image Viewer" />
-        </div>
-    </Transition>
+    <div class="slideshow-wrapper">
+        <Transition name="fade">
+            <div class="image-viewer" @click="nextImage" :key="currentIndex">
+                <Header v-if="currentComment">
+                    {{ currentComment }}
+                </Header>
+                <img :src="currentUrl" alt="Image Viewer" />
+            </div>
+        </Transition>
+    </div>
 </template>
 
 <style scoped>
+.slideshow-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .image-viewer {
     width: 100%;
+    height: 100%;
     overflow: hidden;
 }
 
@@ -61,6 +70,12 @@ img {
 .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;
diff --git a/nginx/vue/src/views/CV/CV.vue b/nginx/vue/src/views/CV/CV.vue
index b37298a..cd9a5ba 100644
--- a/nginx/vue/src/views/CV/CV.vue
+++ b/nginx/vue/src/views/CV/CV.vue
@@ -6,11 +6,6 @@ import Project from "./Project.vue";
     <main>
         <div class="no-print w-full h-20">
 
-        </div>
-        <div class="no-print w-full text-center flex flex-row place-content-around">
-        </div>
-        <div class="no-print w-full h-20">
-
         </div>
         <div class="a4page">
             <div class="flex flex-row justify-between">
diff --git a/nginx/vue/src/views/home/Listening.vue b/nginx/vue/src/views/home/Listening.vue
index 3549f53..738598c 100644
--- a/nginx/vue/src/views/home/Listening.vue
+++ b/nginx/vue/src/views/home/Listening.vue
@@ -29,7 +29,8 @@ onUnmounted(() => {
 </script>
 
 <template>
-    <Transition name="fade" mode="out-in">
+    <div class="listening-wrapper">
+    <Transition name="fade">
         <div
             @click="nextSong"
             :key="song.track.id"
@@ -45,9 +46,16 @@ onUnmounted(() => {
             </p>
         </div>
     </Transition>
+    </div>
 </template>
 
 <style scoped>
+.listening-wrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 img {
     width: 70%;
 }
@@ -56,15 +64,17 @@ p {
     margin: 0 auto;
 }
 
-.fade-enter-active {
-    transition: opacity 0.5s ease;
-}
+.fade-enter-active,
 .fade-leave-active {
     transition: opacity 0.5s ease;
 }
-.fade-enter-from {
-    opacity: 0;
+.fade-leave-active {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
 }
+.fade-enter-from,
 .fade-leave-to {
     opacity: 0;
 }