From 2d070ec90115a1ff2cfdbda67bfbf08ab83f96ff Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Thu, 3 Oct 2024 07:39:18 -0700
Subject: [PATCH] Merge pull request #20796 from
 overleaf/jel-cms-container-width

[web] Switch to class instead of inline style for `max-width` on CMS rows

GitOrigin-RevId: 26517f7c3e6b09078d133920c380da1283e38736
---
 .../stylesheets/bootstrap-5/pages/cms.scss    | 64 ++++++++++++-------
 1 file changed, 41 insertions(+), 23 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 3ee29e4967..9da6a062f1 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -501,36 +501,54 @@
     }
   }
 
-  .section-row-gap-spacing-16 {
-    @include section-row-custom-gap(calc(var(--spacing-16) / 2));
-  }
+  .section-row {
+    &.section-row-max-800 {
+      max-width: 800px !important;
+    }
 
-  .section-row-gap-spacing-15 {
-    @include section-row-custom-gap(calc(var(--spacing-15) / 2));
-  }
+    &.section-row-max-900 {
+      max-width: 900px !important;
+    }
 
-  .section-row-gap-spacing-14 {
-    @include section-row-custom-gap(calc(var(--spacing-14) / 2));
-  }
+    &.section-row-max-1000 {
+      max-width: 1000px !important;
+    }
 
-  .section-row-gap-spacing-13 {
-    @include section-row-custom-gap(calc(var(--spacing-13) / 2));
-  }
+    &.section-row-max-unset {
+      max-width: unset !important;
+    }
 
-  .section-row-gap-spacing-12 {
-    @include section-row-custom-gap(calc(var(--spacing-12) / 2));
-  }
+    &.section-row-gap-spacing-16 {
+      @include section-row-custom-gap(calc(var(--spacing-16) / 2));
+    }
 
-  .section-row-gap-spacing-11 {
-    @include section-row-custom-gap(calc(var(--spacing-11) / 2));
-  }
+    &.section-row-gap-spacing-15 {
+      @include section-row-custom-gap(calc(var(--spacing-15) / 2));
+    }
 
-  .section-row-gap-spacing-10 {
-    @include section-row-custom-gap(calc(var(--spacing-10) / 2));
-  }
+    &.section-row-gap-spacing-14 {
+      @include section-row-custom-gap(calc(var(--spacing-14) / 2));
+    }
 
-  .section-row-gap-spacing-09 {
-    @include section-row-custom-gap(calc(var(--spacing-09) / 2));
+    &.section-row-gap-spacing-13 {
+      @include section-row-custom-gap(calc(var(--spacing-13) / 2));
+    }
+
+    &.section-row-gap-spacing-12 {
+      @include section-row-custom-gap(calc(var(--spacing-12) / 2));
+    }
+
+    &.section-row-gap-spacing-11 {
+      @include section-row-custom-gap(calc(var(--spacing-11) / 2));
+    }
+
+    &.section-row-gap-spacing-10 {
+      @include section-row-custom-gap(calc(var(--spacing-10) / 2));
+    }
+
+    &.section-row-gap-spacing-09 {
+      @include section-row-custom-gap(calc(var(--spacing-09) / 2));
+    }
   }
 }