X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=client%2Fsrc%2Fsass%2Fprimeng-custom.scss;h=ace0fd63aa318035380f5890adf88e2199a32dda;hb=7b51ede977c299a74728171d8c124bcc4cbba6ea;hp=1f50eea541a8efaf9dfcf737f84462575468487a;hpb=cf21b2cbef61929177b9c09b5e017c3b7eb8535d;p=github%2FChocobozzz%2FPeerTube.git

diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 1f50eea54..ace0fd63a 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -2,7 +2,7 @@
 @use '_mixins' as *;
 
 /* stylelint-disable */
-@use 'primeng/resources/primeng';
+@import '~primeng/resources/primeng.css';
 
 // Override primeng style we don't want
 input[type=button] {
@@ -495,7 +495,7 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   border: 1px solid #a80000;
 }
 
-//
+// data table customizations
 
 @mixin glyphicon-light {
   font-family: 'Glyphicons Halflings';
@@ -504,7 +504,6 @@ body p-selectbutton.ng-dirty.ng-invalid .p-button {
   font-display: swap;
 }
 
-// data table customizations
 p-table {
   .p-datatable-header {
     border: none !important;
@@ -759,6 +758,10 @@ p-table {
       }
     }
   }
+
+  .badge {
+    @include peertube-badge;
+  }
 }
 
 // overflow data table
@@ -768,7 +771,7 @@ p-table {
     max-width: 100%;
 
     table {
-      min-width: breakpoint(lg);
+      width: 100%;
     }
   }
 
@@ -979,3 +982,40 @@ p-toast {
     font-weight: 600;
   }
 }
+
+@media screen and (max-width: $primeng-breakpoint) {
+  p-table {
+    td {
+      padding: 3px 0;
+
+      &.expand-cell {
+        padding: 5px;
+      }
+    }
+
+    .p-datatable-tbody {
+
+      td:last-child {
+        padding-bottom: 15px;
+        margin-bottom: 15px;
+        border-bottom: 1px solid $separator-border-color !important;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: $mobile-view) {
+  p-table {
+    .p-datatable-header {
+      .caption {
+        flex-wrap: wrap;
+
+        > div {
+          width: 100%;
+          padding: 0 !important;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}