Merge pull request #21228 from overleaf/as-gallery-related-tags

[web] Update gallery related tags styling and introduce Show More behaviour

GitOrigin-RevId: 7caef881c9a6f70437486e2bb080135d84f6742f

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

@@ -180,9 +180,8 @@
       gap: var(--spacing-04);
 
       .badge-container {
-        .badge:not(:first-child) {
-          margin-left: var(--spacing-04);
-        }
+        display: flex;
+        gap: var(--spacing-04);
       }
 
       * {
@@ -306,20 +305,37 @@
     @include shadow-md;
   }
 
-  @include media-breakpoint-down(lg) {
-    .gallery-container {
-      display: grid;
-      grid-template-columns: 50% 50%;
+  .related-tags-header {
+    margin-top: var(--spacing-16);
+  }
 
-      &.use-percent {
-        .gallery-thumbnail {
-          align-content: end;
-          width: 100%;
-        }
-      }
+  .related-tags {
+    margin-top: var(--spacing-09);
+    padding: 0 var(--spacing-05);
+    gap: var(--spacing-05);
+    max-height: 60px;
+    overflow: hidden;
+
+    &.all-tags {
+      max-height: none;
     }
   }
 
+  .tag-badge {
+    max-width: 200px;
+  }
+
+  .tag-link {
+    text-decoration: none;
+    color: inherit;
+
+    @include body-sm;
+  }
+
+  .show-more-tags {
+    margin-top: var(--spacing-06);
+  }
+
   @include media-breakpoint-up(lg) {
     .template-item-left-section {
       padding-right: var(--spacing-10);
@@ -331,17 +347,6 @@
   }
 
   @include media-breakpoint-down(md) {
-    .gallery-container {
-      grid-template-columns: 100%;
-
-      &.use-percent {
-        .gallery-thumbnail {
-          padding-left: unset;
-          padding-right: unset;
-        }
-      }
-    }
-
     .template-item-right-section {
       margin-top: var(--spacing-11);
     }

services/web/locales/en.json

@@ -750,6 +750,7 @@
   "gallery_page_summary": "A gallery of up-to-date and stylish LaTeX templates, examples to help you learn LaTeX, and papers and presentations published by our community. Search or browse below.",
   "gallery_page_title": "Gallery - Templates, Examples and Articles written in LaTeX",
   "gallery_show_all": "Show all __itemPlural__",
+  "gallery_show_more_tags": "Show more",
   "generate_token": "Generate token",
   "generic_if_problem_continues_contact_us": "If the problem continues please contact us",
   "generic_linked_file_compile_error": "This project’s output files are not available because it failed to compile. Please open the project to see the compilation error details.",