Merge pull request #21446 from overleaf/jel-content-pages-btn

[web] Fix spacing between `.btn` on gallery pages

GitOrigin-RevId: f3603ffb0a64b69fd3f12eae74639599aa5f8c9a

services/web/app/views/_mixins/begin_now_card.pug

@@ -13,12 +13,12 @@ mixin begin_now_card()
 						span now
 						span.text-green-bright }
 				p #{translate("discover_why_people_worldwide_trust_overleaf", {count: 18})}
-				p
+				p.card-links
 					if !isUserLoggedIn
 						a.btn.btn-primary.card-link(
 							href=registerURL
 						) #{translate("sign_up_for_free")}
-					a.card-link(
+					a.btn.card-link(
-						class = isUserLoggedIn ? 'btn btn-primary' : 'btn btn-secondary'
+						class = isUserLoggedIn ? 'btn-primary' : 'btn-secondary'
 						href=plansURL
 					) #{translate("explore_all_plans")}

services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss

@@ -66,10 +66,6 @@
     }
   }
 
-  .btn + .btn {
-    margin-left: var(--spacing-06);
-  }
-
   .card + .card {
     margin-top: var(--spacing-09);
   }

services/web/frontend/stylesheets/bootstrap-5/pages/content.scss

@@ -12,6 +12,25 @@
 
   word-break: break-word;
 
+  .btn + .btn,
+  .card-link + .card-link {
+    margin-left: var(--spacing-06);
+  }
+
+  .card-links {
+    @include media-breakpoint-down(md) {
+      .btn {
+        width: 100%;
+        margin-left: 0;
+        margin-top: var(--spacing-05);
+      }
+
+      .btn:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+
   /*
       Links and Buttons
     */

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

@@ -354,13 +354,18 @@
   }
 
   .cta-links-container {
-    margin: var(--spacing-09) 0;
+    margin-top: var(--spacing-09);
+    margin-bottom: var(--spacing-09);
 
     .cta-links {
       display: inline-flex;
-      gap: var(--spacing-04);
+      align-items: flex-start;
-      padding: unset;
       flex-wrap: wrap;
+      gap: var(--spacing-06);
+
+      .btn {
+        margin: 0; // gap will handle spacing
+      }
     }
   }
 

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -236,28 +236,6 @@
     --bs-card-spacer-x: var(--spacing-08);
   }
 
-  .cta-card {
-    .btn + .btn {
-      margin-left: var(--spacing-04);
-    }
-
-    p:has(.btn) {
-      margin-top: var(--spacing-09);
-
-      @include media-breakpoint-down(md) {
-        .btn {
-          width: 100%;
-          margin-left: 0;
-          margin-top: var(--spacing-05);
-        }
-
-        .btn:first-child {
-          margin-top: 0;
-        }
-      }
-    }
-  }
-
   .badge-premium {
     --badge-font-weight: 600;
   }