Fix multiline ellipsis

3 files changed, 11 insertions, 7 deletions

diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
index cd492e9ad..a9628c696 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.scss
@@ -32,6 +32,8 @@ $more-margin-right: 15px;
 
       .video-miniature-name {
         @include miniature-name;
+
+        word-wrap: break-word;
         width: calc(100% - #{$more-button-width});
       }
 
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 426263444..7643a6816 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -4,6 +4,7 @@
 @mixin miniature-name {
   @include ellipsis-multiline(1.1em, 2);
 
+  word-break: break-all;
   transition: color 0.2s;
   font-weight: $font-semibold;
   color: pvar(--mainForegroundColor);
@@ -226,22 +227,22 @@ $play-overlay-width: 18px;
 
   @media screen and (min-width: $mobile-view) {
     .videos {
-      --miniature-min-width: #{$video-thumbnail-width - 15px};
-      --miniature-max-width: #{$video-thumbnail-width};
+      --miniatureMinWidth: #{$video-thumbnail-width - 15px};
+      --miniatureMaxWidth: #{$video-thumbnail-width};
 
       display: grid;
       column-gap: 5px;
       grid-template-columns: repeat(
         auto-fill,
         minmax(
-          var(--miniature-min-width),
+          var(--miniatureMinWidth),
           1fr
         )
       );
 
       @media screen and (min-width: #{breakpoint(fhd)}) {
         column-gap: 1%;
-        --miniature-min-width: #{$video-thumbnail-width};
+        --miniatureMinWidth: #{$video-thumbnail-width};
       }
 
       .video-wrapper {
@@ -250,8 +251,8 @@ $play-overlay-width: 18px;
 
         my-video-miniature {
           display: block;
-          min-width: var(--miniature-min-width);
-          max-width: var(--miniature-max-width);
+          min-width: var(--miniatureMinWidth);
+          max-width: var(--miniatureMaxWidth);
         }
       }
     }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 58920ce36..eac2f1a7f 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -23,12 +23,13 @@
   display: block;
   /* Fallback for non-webkit */
   display: -webkit-box;
-  max-height: $font-size * $number-of-lines;
+  -webkit-line-clamp: $number-of-lines;
   /* Fallback for non-webkit */
   font-size: $font-size;
   line-height: $font-size;
   overflow: hidden;
   text-overflow: ellipsis;
+  max-height: $font-size * $number-of-lines;
 }
 
 @mixin fade-text ($fade-after, $background-color) {