From 52bb22a794b00927df1f7fdebe1c2f937abd0460 Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Fri, 25 Oct 2024 08:01:38 -0700
Subject: [PATCH] Merge pull request #21378 from
 overleaf/mf-wrap-filter-navigation

[web] Adjust the styling of the navigation filter on devices with a small screen width on gallery page

GitOrigin-RevId: a404293a030aa60f2261ad2219bc7e55d885f042
---
 .../stylesheets/bootstrap-5/pages/templates-v2.scss      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
index df4828a9ba..a8159822bd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
@@ -8,6 +8,12 @@
     text-align: left;
     max-width: 828px;
   }
+
+  .gallery-filters {
+    @include media-breakpoint-down(lg) {
+      margin-top: var(--spacing-06);
+    }
+  }
 }
 
 .gallery {
@@ -26,10 +32,11 @@
     }
   }
 
-  .filters {
+  .gallery-filters {
     float: right;
     margin-bottom: var(--spacing-11);
     display: flex;
+    flex-wrap: wrap;
     gap: var(--spacing-04);
 
     @include media-breakpoint-down(lg) {