From 88d50474d201bb9637653c5cd20243b5f9ee8814 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 27 Nov 2024 14:38:16 +0100
Subject: [PATCH] Fix video filters responsive

Signed-off-by: Chocobozzz <me@florianbigard.com>
---
 .../video-filters-header.component.html       |  4 ++--
 .../video-filters-header.component.scss       | 22 +++++++++++++++----
 client/src/sass/application.scss              |  2 +-
 client/src/sass/include/_miniature.scss       | 16 +++++---------
 client/src/sass/include/_variables.scss       |  1 -
 5 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html b/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
index 423337882..208777ffb 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.html
+++ b/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') {
diff --git a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss b/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
index e10a6bbf8..0331a9c87 100644
--- a/client/src/app/shared/shared-video-miniature/video-filters-header.component.scss
+++ b/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 {
-  width: 300px;
+my-select-categories,
+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;
+  }
 }
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 26b174307..e7b427744 100644
--- a/client/src/sass/application.scss
+++ b/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)};
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index b41f70d94..8f32566b1 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/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 ($margin: true, $min-margin: 0) {
-  --gridVideosMiniatureMargins: #{pvar(--x-videos-margin-content)};
+@mixin grid-videos-miniature-margins {
+  --grid-videos-miniature-margins: #{pvar(--x-margin-content)};
 
-  @if $margin {
-    @include margin-left(var(--gridVideosMiniatureMargins) !important);
-    @include margin-right(var(--gridVideosMiniatureMargins) !important);
-  } @else {
-    @include padding-left(var(--gridVideosMiniatureMargins) !important);
-    @include padding-right(var(--gridVideosMiniatureMargins) !important);
-  }
+  @include margin-left(var(--grid-videos-miniature-margins) !important);
+  @include margin-right(var(--grid-videos-miniature-margins) !important);
 
   @media screen and (max-width: $mobile-view) {
-    --gridVideosMiniatureMargins: #{$min-margin};
+    --grid-videos-miniature-margins: 0;
 
     width: auto;
   }
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index e90f55941..e604620e5 100644
--- a/client/src/sass/include/_variables.scss
+++ b/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),