From 33253c1aa6b82284ddd0a9cb516ad85e276ca3a3 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 31 Mar 2021 11:47:47 +0200
Subject: [PATCH] Fix multiline ellipsis

---
 .../video-miniature.component.scss                  |  2 ++
 client/src/sass/include/_miniature.scss             | 13 +++++++------
 client/src/sass/include/_mixins.scss                |  3 ++-
 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) {