Fix margin-content and miniature thumbnail width on mobile, fix media queries for tables above lg breakpoint

5 files changed, 23 insertions, 20 deletions

diff --git a/client/src/app/shared/forms/markdown-textarea.component.scss b/client/src/app/shared/forms/markdown-textarea.component.scss
index 065cd2dec..8e5739e45 100644
--- 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 e0009ed3f..977312a83 100644
--- 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 f54fecda8..62503fc02 100644
--- 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 5e591cf45..c937a0f72 100644
--- 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 9c9a6197d..b3cd7cf51 100644
--- 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;
+        }
       }
     }
   }