Improve responsive on small screens

diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
index a55e743fbf3c43ba579a19562ed1c330c7ecf737..bb809296a237b1ac75ef79390b3c907964c065c1 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.scss
@@ -39,3 +39,9 @@ form {
     @include orange-button
   }
 }
+
+@media screen and (max-width: 450px) {
+  textarea, .submit-comment button {
+    font-size: 14px !important;
+  }
+}
\ No newline at end of file

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 f331fab8037b6cd55622ee3375a9a9859b73761b..84da5727e6d534c8949efca2b1b9b4dcd2505774 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
@@ -35,6 +35,7 @@
       .comment-account {
         @include disable-default-a-behaviour;
 
+        word-break: break-all;
         color: var(--mainForegroundColor);
         font-weight: $font-bold;
       }
@@ -102,3 +103,9 @@
     img { margin-right: 10px; }
   }
 }
+
+@media screen and (max-width: 450px) {
+  .root-comment {
+    font-size: 14px;
+  }
+}
\ No newline at end of file

diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.scss b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
index d5af929d785dbf3743b1faa3ba70bb6e05aa87e9..04518e07996073d7f7c4318138e5d48df98da1b4 100644 (file)
--- a/client/src/app/videos/+video-watch/comment/video-comments.component.scss
+++ b/client/src/app/videos/+video-watch/comment/video-comments.component.scss
@@ -31,4 +31,10 @@ my-help {
   .view-replies {
     margin-left: 46px;
   }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 450px) {
+  .view-replies {
+    font-size: 14px;
+  }
+}

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 15adf0f61bd8e839ae55c8e626822a282335f087..eb63cbde78c26a204d7a6355bc165ffd6153f449 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -473,6 +473,7 @@ my-video-comments {
     margin: 20px 0 0 0;
 
     .video-info {
+      padding: 0;
 
       .video-info-first-row {
 
@@ -485,6 +486,8 @@ my-video-comments {
   }
 
   /deep/ .other-videos {
+    padding-left: 0 !important;
+
     /deep/ .video-miniature  {
       flex-direction: column;
     }
@@ -500,7 +503,27 @@ my-video-comments {
 }
 
 @media screen and (max-width: 450px) {
-  .video-bottom  .action-button .icon-text {
-    display: none !important;
+  .video-bottom {
+    .action-button .icon-text {
+      display: none !important;
+    }
+
+    .video-info .video-info-first-row {
+      .video-info-name {
+        font-size: 18px;
+      }
+
+      .video-info-date-views {
+        font-size: 14px;
+      }
+
+      .video-actions-rates {
+        margin-top: 10px;
+      }
+    }
+
+    .video-info-description {
+      font-size: 14px !important;
+    }
   }
 }

diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index d755e7df399cfafc9f35c5fc6aaf80994396815f..544f3995764708c89a009f1d66f624ebaefd9dfc 100644 (file)
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -53,7 +53,6 @@
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;
-  text-align: justify;
 }
 
 @mixin peertube-input-text($width) {