Remove extra whitespace on CV.vue and stopped height becoming 0 on image transitions

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;

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

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;
 }