From 7a7533f794bd2d7df3cd7984836fae7d11a946d7 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Thu, 24 Oct 2024 09:25:07 -0500
Subject: [PATCH] Merge pull request #21116 from
 overleaf/mf-new-gallery-search-result-mobile

[web] Adjust search result styling for smaller screen width

GitOrigin-RevId: 6a16b0ca05358c6c83cc626c6103a6bffc98c33f
---
 .../bootstrap-5/components/gallery-search.scss       | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
index 5daeb7e7e5..a0dc63389d 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss
@@ -48,6 +48,10 @@
           img {
             width: 185px;
             box-shadow: 0 2px 4px 0 rgba(30 37 48 / 16%);
+
+            @include media-breakpoint-down(sm) {
+              width: 35vw;
+            }
           }
         }
       }
@@ -55,10 +59,17 @@
       .search-title {
         margin-bottom: var(--spacing-04);
         max-width: $templates-search-max-width;
+        display: flex;
+        align-items: center;
 
         a {
           @include heading-md;
 
+          line-clamp: 2;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+          overflow-y: hidden;
           color: var(--content-primary);
           text-decoration: none;
 
@@ -90,6 +101,7 @@
         margin: 0;
         padding-left: 0;
         display: flex;
+        flex-wrap: wrap;
         gap: var(--spacing-04);
 
         li a {