Fix margin-content and miniature thumbnail width on mobile, fix media queries for...

diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 065cd2dec8646dd61ee90d85d0779dd246dd8a7a..8e5739e452dcee16aaa24c9ffe5fa8f05008f999 100644 (file)
--- a/client/src/app/shared/forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/forms/markdown-textarea.component.scss
@@ -15,7 +15,7 @@ $input-border-radius: 3px;
       @include peertube-textarea(100%, 150px);
 
       background-color: var(--textareaBackgroundColor);
-      font-family: courier, monospace;
+      font-family: monospace;
       font-size: 13px;
       border-bottom: none;
       border-bottom-left-radius: unset;

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 e0009ed3f67ab72b2e9a1415b682f52284c8e772..977312a8363387d23f6a1e4e18fdec52e42d0799 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -551,7 +551,8 @@ my-video-comments {
 
 @media screen and (max-width: 600px) {
   .video-bottom {
-    margin: 20px 0 0 0 !important;
+    margin-top: 20px !important;
+    margin-bottom: 20px !important;
 
     .video-info {
       padding: 0;

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f54fecda8b168d9ef40920948c4064d4195c62f4..62503fc0254f4de7303b0680448d393cf6e7a32a 100644 (file)
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -344,14 +344,14 @@ table {
 }
 
 // overflow-databale responsive rules
-@media screen and (max-width: #{breakpoint(xxl)}) {
+@media screen and (min-width: #{breakpoint(lg)}) {
   .main-col {
     &.expanded {
-      @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2);
+      @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
     }
 
     &:not(.expanded) {
-      @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
+      @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
     }
   }
 }
@@ -363,7 +363,7 @@ table {
     }
 
     &:not(.expanded) {
-      @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2);
+      @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
     }
   }
 }
@@ -381,7 +381,7 @@ table {
   .main-col {
     &:not(.expanded) {
       .admin-sub-header {
-        @include admin-sub-header-responsive($menu-width/2 + $expanded-horizontal-margins/3);
+        @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
       }
     }
   }

diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 5e591cf455ba25bd17bd905b6ae87d19df11dea3..c937a0f72c3fc7e44f559d0afcb91311efcd8518 100644 (file)
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -127,9 +127,9 @@ $play-overlay-width: 18px;
     }
 
     .video-thumbnail {
-      margin: 0 -15px 10px -15px;
-      width: 100vw;
-      height: calc(100vw / #{$video-thumbnail-ratio});
+      margin-bottom: 10px;
+      width: 100%;
+      height: calc(100% / #{$video-thumbnail-ratio});
       border-radius: 0;
 
       img {

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9c9a6197d255dc4cffa6ed0963354f0cae7efea9..b3cd7cf511f1d4daa9d5caa7ce297d06c7fa76b6 100644 (file)
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -283,7 +283,7 @@ p-table {
 }
 
 // overflow data table
-@mixin overflow-datatable ($table-min-width, $horizontal-margins) {
+@mixin overflow-datatable ($table-min-width, $horizontal-margins, $mobile-paginator: true) {
   p-table {
     .ui-table-wrapper {
       overflow-x: auto;
@@ -294,16 +294,18 @@ p-table {
       }
     }
 
-    p-paginator .ui-paginator-bottom {
-      display: block;
-
-      .ui-paginator-current {
-        position: relative;
+    @if $mobile-paginator {
+      p-paginator .ui-paginator-bottom {
         display: block;
-      }
-
-      a, .ui-paginator-pages {
-        vertical-align: middle;
+  
+        .ui-paginator-current {
+          position: relative;
+          display: block;
+        }
+  
+        a, .ui-paginator-pages {
+          vertical-align: middle;
+        }
       }
     }
   }