Set thumbnail height

client/src/app/shared/video/video-thumbnail.component.scss

@@ -8,8 +8,8 @@
   .progress-bar {
     height: 3px;
     width: 100%;
-    position: relative;
-    top: -3px;
+    position: absolute;
+    bottom: 0;
     background-color: rgba(0, 0, 0, 0.20);
 
     div {

client/src/sass/include/_miniature.scss

@@ -2,13 +2,13 @@
 @import '_mixins';
 
 @mixin miniature-name {
-  @include ellipsis-multiline(16px, 2);
+  @include ellipsis-multiline(1.1em, 2);
 
   transition: color 0.2s;
   font-size: 16px;
   font-weight: $font-semibold;
   color: var(--mainForegroundColor);
-  margin-top: 5px;
+  margin-top: 10px;
   margin-bottom: 5px;
 
   &:hover {
@@ -28,7 +28,8 @@ $play-overlay-width: 18px;
 @mixin miniature-thumbnail {
   @include disable-outline;
 
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   position: relative;
   border-radius: 3px;
   overflow: hidden;
@@ -126,13 +127,13 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      width: calc(100% + 30px);
-      height: auto;
-      margin: 0 -15px;
+      margin: 0 -15px 10px -15px;
+      width: 100vw;
+      height: calc(100vw / #{$video-thumbnail-ratio});
 
       img {
         width: 100%;
-        height: auto;
+        height: 100%;
       }
     }
   }

client/src/sass/include/_mixins.scss

@@ -32,9 +32,7 @@
   max-height: $font-size * $number-of-lines;
   /* Fallback for non-webkit */
   font-size: $font-size;
-  line-height: $font-size - 0.1;
-  -webkit-line-clamp: $number-of-lines;
-  -webkit-box-orient: vertical;
+  line-height: $font-size;
   overflow: hidden;
   text-overflow: ellipsis;
 }

client/src/sass/include/_variables.scss

@@ -49,6 +49,7 @@ $separator-border-color: rgba(0, 0, 0, 0.10);
 $video-miniature-width: 238px;
 $video-thumbnail-height: 122px;
 $video-thumbnail-width: 223px;
+$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
 
 $theater-bottom-space: 115px;