Merge pull request #21110 from overleaf/jel-cms-containers

[web] Remove extra horizontal padding on CMS pages

GitOrigin-RevId: 8f6a768ab8f3a4206ad14045cd75ed33aa335dd4

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

@@ -78,10 +78,61 @@
     font-size: 14px;
   }
 
+  section {
+    padding: var(--spacing-16) 0 0 0;
+
+    &.no-top-padding {
+      /* opt out of padding via the CMS */
+      padding-top: 0;
+    }
+
+    // TODO: confirm if we will still support this and if so what colors to use
+    // &.color-block {
+    //   &.green-dark {
+    //     background-color: @ol-dark-green;
+    //   }
+    //   &.green {
+    //     background-color: @ol-green;
+
+    //     .no-card * {
+    //       .btn-primary,
+    //       .btn-success {
+    //         // only correct button colors when green on green
+    //         .btn-primary-on-primary-bg;
+    //       }
+    //     }
+    //   }
+    //   &.blue-gray-dark {
+    //     background-color: @ol-blue-gray-5;
+    //   }
+    //   &.blue-gray-light {
+    //     background-color: @ol-blue-gray-1;
+    //   }
+
+    //   &.green,
+    //   &.green-dark,
+    //   &.blue-gray-dark {
+    //     .no-card * {
+    //       &:not(.btn) {
+    //         color: @white;
+    //       }
+    //       a {
+    //         text-decoration: underline;
+    //       }
+    //       .btn {
+    //         text-decoration: none;
+    //       }
+
+    //       .form-control {
+    //         color: @input-color;
+    //       }
+    //     }
+    //   }
+    // }
+  }
+
   .section-row {
     @extend .container;
-
-    margin: 0 auto;
   }
 
   padding-bottom: 0;

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

@@ -29,66 +29,6 @@
     border-color: var(--neutral-30);
   }
 
-  /*
-      section
-    */
-  section {
-    padding: var(--spacing-16) var(--spacing-05) 0 var(--spacing-05);
-
-    // TODO: confirm if we will still support this and if so what colors to use
-    // &.color-block {
-    //   &.green-dark {
-    //     background-color: @ol-dark-green;
-    //   }
-    //   &.green {
-    //     background-color: @ol-green;
-
-    //     .no-card * {
-    //       .btn-primary,
-    //       .btn-success {
-    //         // only correct button colors when green on green
-    //         .btn-primary-on-primary-bg;
-    //       }
-    //     }
-    //   }
-    //   &.blue-gray-dark {
-    //     background-color: @ol-blue-gray-5;
-    //   }
-    //   &.blue-gray-light {
-    //     background-color: @ol-blue-gray-1;
-    //   }
-
-    //   &.green,
-    //   &.green-dark,
-    //   &.blue-gray-dark {
-    //     .no-card * {
-    //       &:not(.btn) {
-    //         color: @white;
-    //       }
-    //       a {
-    //         text-decoration: underline;
-    //       }
-    //       .btn {
-    //         text-decoration: none;
-    //       }
-
-    //       .form-control {
-    //         color: @input-color;
-    //       }
-    //     }
-    //   }
-    // }
-
-    .section-row {
-      @extend .container;
-    }
-  }
-
-  section.no-top-padding {
-    /* opt out of padding via the CMS */
-    padding-top: 0;
-  }
-
   // TODO: only used on about page. Confirm with UX changes needed
   // .container-small {
   //   section .section-row {