using the half-shit approach since proper approach is full-shit

src/components/update_notification/update_notification.js

@@ -17,9 +17,9 @@ export const CURRENT_UPDATE_COUNTER = 1
 const UpdateNotification = {
   data () {
     return {
+      showingImage: false,
       pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
-      showingMore: false,
+      showingMore: false
-      contentHeight: 0
     }
   },
   components: {
@@ -32,11 +32,6 @@ const UpdateNotification = {
         'shape-outside': 'url(' + mask + ')'
       }
     },
-    dynamicStyles () {
-      return {
-        '--____extraInfoGroupHeight': this.contentHeight + 'px'
-      }
-    },
     shouldShow () {
       return !this.$store.state.instance.disableUpdateNotification &&
         this.$store.state.users.currentUser &&
@@ -60,12 +55,12 @@ const UpdateNotification = {
     }
   },
   mounted () {
+    this.contentHeightNoImage = this.$refs.animatedText.scrollHeight
+
     // Workaround to get the text height only after mask loaded. A bit hacky.
     const newImg = new Image()
     newImg.onload = () => {
-      setTimeout(() => {
+      setTimeout(() => { this.showingImage = true }, 100)
-        this.contentHeight = this.$refs.animatedText.scrollHeight
-      }, 100)
     }
     newImg.src = this.pleromaTanVariant === pleromaTan ? pleromaTanMask : pleromaTanFoxMask
   }

src/components/update_notification/update_notification.scss

@@ -35,6 +35,12 @@
     margin-top: calc(-1 * var(--__top-fringe));
     margin-bottom: calc(-1 * var(--__bottom-fringe));
     margin-right: calc(-1 * var(--__right-fringe));
+
+    &.-noImage {
+      .text {
+        padding-right: var(--__right-fringe);
+      }
+    }
   }
 
   .panel-body {
@@ -75,9 +81,9 @@
 
   .extra-info-group {
     transition: max-height, padding, height;
-    transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in;
-    transition-duration: 500ms;
+    transition-duration: 700ms;
-    max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
+    max-height: 70vh;
     mask:
       linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
       linear-gradient(to top, white, white);

src/components/update_notification/update_notification.vue

@@ -7,7 +7,6 @@
     <div
       class="UpdateNotificationModal panel"
       :class="{ '-peek': !showingMore }"
-      :style="dynamicStyles"
     >
       <div class="panel-heading">
         <span class="title">
@@ -15,8 +14,12 @@
         </span>
       </div>
       <div class="panel-body">
-        <div class="content">
+        <div
+          class="content"
+          :class="{ '-noImage': !showingImage }"
+        >
           <img
+            v-if="showingImage"
             class="pleroma-tan"
             :src="pleromaTanVariant"
             :style="pleromaTanStyles"