Prevent layout shifts when thumbnails load in the chapter selector (#4713)

src/renderer/components/watch-video-chapters/watch-video-chapters.css

@@ -54,7 +54,6 @@
 .chapterThumbnail {
   grid-area: thumbnail;
   inline-size: 130px;
-  block-size: auto;
   margin: 3px;
 }
 

src/renderer/components/watch-video-chapters/watch-video-chapters.vue

@@ -46,13 +46,15 @@
         @keydown.space.stop.prevent="changeChapter(index)"
         @keydown.enter.stop.prevent="changeChapter(index)"
       >
+        <!-- Setting the aspect ratio avoids layout shifts when the images load -->
         <img
           v-if="!compact"
           alt=""
           aria-hidden="true"
           class="chapterThumbnail"
           loading="lazy"
-          :src="chapter.thumbnail"
+          :src="chapter.thumbnail.url"
+          :style="{ aspectRatio: chapter.thumbnail.width / chapter.thumbnail.height }"
         >
         <div class="chapterTimestamp">
           {{ chapter.timestamp }}

src/renderer/views/Watch/Watch.js

@@ -450,7 +450,7 @@ export default defineComponent({
                 timestamp: formatDurationAsTimestamp(start),
                 startSeconds: start,
                 endSeconds: 0,
-                thumbnail: chapter.thumbnail[0].url
+                thumbnail: chapter.thumbnail[0]
               })
             }
           } else {