Implement rounded thumbnail image styling

This change adds the sleek rounded thumbnail look that one might call similar to that of another site. Also updates the outline to be rounded, and the watch progress bar to cover the now-shortened bottom side.

src/renderer/components/ft-list-video/ft-list-video.scss

@@ -1,5 +1 @@
 @use '../../scss-partials/_ft-list-item';
-
-.thumbnailLink:hover {
-  outline: 3px solid var(--side-nav-hover-color);
-}

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -62,11 +62,13 @@
       >
         {{ $t("Video.Watched") }}
       </div>
-      <div
-        v-if="watched"
-        class="watchedProgressBar"
-        :style="{width: progressPercentage + '%'}"
-      />
+      <div class="watchedProgressBarContainer">
+        <div
+          v-if="watched"
+          class="watchedProgressBar"
+          :style="{width: progressPercentage + '%'}"
+        />
+      </div>
     </div>
     <div class="info">
       <router-link

src/renderer/scss-partials/_ft-list-item.scss

@@ -92,6 +92,8 @@ $watched-transition-duration: 0.5s;
     }
 
     .thumbnailImage {
+      border-radius: 12px;
+
       @include is-sidebar-item {
         height: 75px;
       }
@@ -152,6 +154,11 @@ $watched-transition-duration: 0.5s;
       opacity: $thumbnail-overlay-opacity;
     }
 
+    .watchedProgressBarContainer {
+      width: calc(100% - 24px);
+      margin: auto;
+    }
+
     .watchedProgressBar {
       align-self: flex-end;
       background-color: var(--primary-color);
@@ -299,6 +306,13 @@ $watched-transition-duration: 0.5s;
   }
 }
 
+.thumbnailImage {
+  border-radius: 12px;
+  &:hover {
+    box-shadow: 0 0 0 3px var(--side-nav-hover-color);
+  }
+}
+
 .videoWatched,
 .live,
 .upcoming {