Merge pull request #21067 from overleaf/mf-new-gallery-search-result

[web] Implement new gallery search result

GitOrigin-RevId: afc33a07b5ea533b681acf18bd31112a2f48866a

services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss

@@ -2,3 +2,4 @@
 @import 'variables';
 @import 'variable-overrides';
 @import 'themes-common-variables';
+@import 'templates-search';

services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss

@@ -0,0 +1 @@
+$templates-search-max-width: 885px;

services/web/frontend/stylesheets/bootstrap-5/components/gallery-search.scss

@@ -21,4 +21,76 @@
       }
     }
   }
+
+  .search-hits {
+    margin-top: var(--spacing-16);
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-08);
+
+    .search-hit {
+      display: flex;
+      gap: var(--spacing-08);
+
+      .search-image {
+        a {
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+
+          img {
+            width: 185px;
+            box-shadow: 0 2px 4px 0 rgba(30 37 48 / 16%);
+          }
+        }
+      }
+
+      .search-title {
+        margin-bottom: var(--spacing-04);
+        max-width: $templates-search-max-width;
+
+        a {
+          @include heading-md;
+
+          color: var(--content-primary);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+
+      .search-highlight {
+        max-width: $templates-search-max-width;
+      }
+
+      .gallery-official {
+        margin-left: var(--spacing-06);
+        vertical-align: text-top;
+      }
+
+      .search-hit-tags {
+        list-style: none;
+        margin: 0;
+        padding-left: 0;
+        display: flex;
+        gap: var(--spacing-04);
+
+        li a {
+          @include body-sm;
+
+          color: var(--color-primary-dark);
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+            color: var(--green-50);
+          }
+        }
+      }
+    }
+  }
 }

services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

@@ -41,10 +41,14 @@
   }
 
   .gallery-header {
-    max-width: 885px;
+    // padding: 0 is added when the screen size is much bigger than the $templates-search-max-width
+    // to remove unwanted padding
+    @include media-breakpoint-up(xl) {
+      padding: 0;
+    }
 
     @include media-breakpoint-up(lg) {
-      padding: 0;
+      max-width: $templates-search-max-width;
     }
   }