Fix video filters responsive

Signed-off-by: Chocobozzz <me@florianbigard.com>

client/src/app/shared/shared-video-miniature/video-filters-header.component.html

@@ -11,7 +11,7 @@
   </div>
 
   <div class="d-flex flex-wrap-reverse align-items-start justify-content-between">
-    <div class="me-3">
+    <div class="gap-3">
       <div class="scope-info" *ngIf="totalFollowing && !hideScope">
         @if (filters.scope === 'local') {
           <ng-container i18n>Videos on <strong>{{ instanceName }}</strong></ng-container>
@@ -20,7 +20,7 @@
         }
       </div>
 
-      <div class="filters-summary d-inline-block">
+      <div class="filters-summary">
         <div class="d-inline-block active-filters">
           @for (filter of filters.getActiveFilters(); track filter.key + (filter.value || '')) {
             @if (filter.key !== 'scope') {

client/src/app/shared/shared-video-miniature/video-filters-header.component.scss

@@ -51,9 +51,10 @@ $filters-background: pvar(--bg-secondary-400);
   display: flex;
   flex-wrap: wrap;
   background-color: $filters-background;
-  padding: 1.5rem;
   border-radius: 14px;
 
+  @include rfs(1.5rem, padding);
+
   input[type=radio] + label {
     font-weight: $font-regular;
   }
@@ -116,8 +117,9 @@ $filters-background: pvar(--bg-secondary-400);
 }
 
 my-select-languages,
-my-select-categories {
+my-select-categories,
-  width: 300px;
+my-select-options {
+  max-width: 300px;
   display: inline-block;
 }
 
@@ -132,7 +134,19 @@ my-select-categories {
 }
 
 @media screen and (max-width: $small-view) {
-  .filters-row {
+  .filters-toggle {
+    margin-top: 0.5rem;
+
+    @include margin-left(0);
+  }
+
+  .filters-summary {
+    display: flex;
     flex-direction: column;
   }
+
+  .filters {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
 }

client/src/sass/application.scss

@@ -65,7 +65,7 @@ body {
   --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
 
   --x-margin-content: 2rem;
-  --x-videos-margin-content: 2rem;
+
   --main-col-width: calc(100vw - #{$menu-width});
 
   --secondary-icon-color: #{pvar(--fg-50)};

client/src/sass/include/_miniature.scss

@@ -111,20 +111,14 @@
   color: #E9DFDF;
 }
 
-// Use margin by default, or padding if $margin is false
+@mixin grid-videos-miniature-margins {
-@mixin grid-videos-miniature-margins ($margin: true, $min-margin: 0) {
+  --grid-videos-miniature-margins: #{pvar(--x-margin-content)};
-  --gridVideosMiniatureMargins: #{pvar(--x-videos-margin-content)};
 
-  @if $margin {
+  @include margin-left(var(--grid-videos-miniature-margins) !important);
-    @include margin-left(var(--gridVideosMiniatureMargins) !important);
+  @include margin-right(var(--grid-videos-miniature-margins) !important);
-    @include margin-right(var(--gridVideosMiniatureMargins) !important);
-  } @else {
-    @include padding-left(var(--gridVideosMiniatureMargins) !important);
-    @include padding-right(var(--gridVideosMiniatureMargins) !important);
-  }
 
   @media screen and (max-width: $mobile-view) {
-    --gridVideosMiniatureMargins: #{$min-margin};
+    --grid-videos-miniature-margins: 0;
 
     width: auto;
   }

client/src/sass/include/_variables.scss

@@ -84,7 +84,6 @@ $variables: (
   --embed-big-play-background-color: var(--embed-big-play-background-color),
 
   --x-margin-content: var(--x-margin-content),
-  --x-videos-margin-content: var(--x-videos-margin-content),
   --main-col-width: var(--main-col-width),
   --header-height: var(--header-height),