From c27dc70c80415efa2e565a2fbcb5f479bfefc3b2 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:23:34 -0600
Subject: [PATCH] Merge pull request #21516 from overleaf/jel-template-labels

[web] Use grid layout for template details

GitOrigin-RevId: 1f15dfcd9bc04bec5bd7e0b6a7b1230966def997
---
 .../bootstrap-5/pages/templates-v2.scss       | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

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 8c53317715..11e515c342 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
@@ -328,9 +328,19 @@
   }
 
   .template-details-container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-04);
+    @include heading-xs;
+
+    gap: var(--spacing-04) var(--spacing-11);
+    display: grid;
+    grid-template-columns: auto auto;
+
+    .template-detail {
+      display: contents;
+
+      &.tags > div {
+        margin-top: var(--spacing-06);
+      }
+    }
   }
 
   .gallery-abstract {
@@ -340,17 +350,10 @@
     a {
       hyphens: none;
     }
-  }
 
-  .field-title {
-    color: var(--neutral-70);
-    font-weight: 600;
-
-    @include heading-xs;
-  }
-
-  .field-description {
-    @include heading-xs;
+    p:last-child {
+      margin-bottom: 0;
+    }
   }
 
   .cta-links-container {