Merge pull request #22383 from overleaf/jel-cms-btns

[web] CMS - Add ability to adjust `<p>` top margin

GitOrigin-RevId: f85b95e407d8c186141a3e60c7d07a9efa44c4c3

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

@@ -50,6 +50,10 @@
     }
   }
 
+  .row {
+    row-gap: var(--spacing-13);
+  }
+
   .p-no-text-nodes:has(.btn) {
     margin-top: var(--spacing-09);
 
@@ -86,6 +90,15 @@
     }
   }
 
+  // create .paragraphs-top-margin-spacing-00, .paragraphs-top-margin-spacing-01, .paragraphs-top-margin-spacing-02, .paragraphs-top-margin-spacing-03, .paragraphs-top-margin-spacing-04, .paragraphs-top-margin-spacing-05, .paragraphs-top-margin-spacing-06, .paragraphs-top-margin-spacing-07, .paragraphs-top-margin-spacing-08, .paragraphs-top-margin-spacing-09, .paragraphs-top-margin-spacing-10, .paragraphs-top-margin-spacing-11, .paragraphs-top-margin-spacing-12, .paragraphs-top-margin-spacing-13, .paragraphs-top-margin-spacing-14, .paragraphs-top-margin-spacing-15, .paragraphs-top-margin-spacing-16
+  @each $spacing-option in $all-spacings {
+    .paragraphs-top-margin-#{$spacing-option} {
+      p {
+        margin-top: var(--#{$spacing-option}) !important;
+      }
+    }
+  }
+
   // create .headers-top-margin-spacing-00, .headers-top-margin-spacing-01, .headers-top-margin-spacing-02, .headers-top-margin-spacing-03, .headers-top-margin-spacing-04, .headers-top-margin-spacing-05, .headers-top-margin-spacing-06, .headers-top-margin-spacing-07, .headers-top-margin-spacing-08, .headers-top-margin-spacing-09, .headers-top-margin-spacing-10, .headers-top-margin-spacing-11, .headers-top-margin-spacing-12, .headers-top-margin-spacing-13, .headers-top-margin-spacing-14, .headers-top-margin-spacing-15, .headers-top-margin-spacing-16
   @each $spacing-option in $all-spacings {
     .headers-top-margin-#{$spacing-option} {
@@ -722,10 +735,6 @@
 // Mobile layout options depdendent on mobile breakpoint
 @include media-breakpoint-down(lg) {
   .cms-page {
-    div.row {
-      row-gap: var(--spacing-13);
-    }
-
     .reverse-col-order-mobile {
       flex-direction: column-reverse;
     }