Use mixin for word wrap

diff --git a/client/src/app/videos/+video-watch/comment/video-comment.component.scss b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
index 4c481d486bd4ef27f5feadd64ee5f720174fc7a3..c90f9849bdcc6ba28cf86d1bce0f0126f81615f1 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comment.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment.component.scss
@@ -46,14 +46,7 @@
     }
 
     .comment-html {
-      word-break: normal;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      -webkit-hyphens: auto;
-      -ms-hyphens: auto;
-      -moz-hyphens: auto;
-      hyphens: auto;
-      text-align: justify;
+      @include peertube-word-wrap;
 
       /deep/ a {
         @include disable-default-a-behaviour;

diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index b9596cbee121a49b00c8a98891fd9e2c89ecbf0c..1b44f0d6aaeab469f2c9b18c40dbe49db3d57c3e 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -215,14 +215,7 @@
       font-size: 15px;
 
       .video-info-description-html {
-        word-break: normal;
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-        -webkit-hyphens: auto;
-        -ms-hyphens: auto;
-        -moz-hyphens: auto;
-        hyphens: auto;
-        text-align: justify;
+        @include peertube-word-wrap;
       }
 
       .description-loading {

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index f905f9ae5f7e4d4f7d9207b6c0f78e13642a207a..7e7a38bbdae86d19900c7f373c71d1a177a4d4b6 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -16,6 +16,17 @@
   }
 }
 
+@mixin peertube-word-wrap {
+  word-break: normal;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  hyphens: auto;
+  text-align: justify;
+}
+
 @mixin peertube-input-text($width) {
   display: inline-block;
   height: $button-height;