From 40af0fa84f9b2aa3a2272fd96e1d0d42148942e5 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Tue, 5 Nov 2024 09:24:14 -0600
Subject: [PATCH] Merge pull request #21552 from overleaf/jel-cms-rows

[web] Fix parent row styling applying to nested rows on CMS pages

GitOrigin-RevId: 047c24fcff4ac73b0d0db403d728e3e3e8876b6f
---
 .../stylesheets/bootstrap-5/pages/cms.scss    | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 4da92c58d2..7037cfff28 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -127,7 +127,8 @@
     // }
   }
 
-  .section-row {
+  // only first level of .section-row need to act like containers. We do not want to update .section-row nested within a .section-row
+  section > .section-row {
     @extend .container;
   }
 
@@ -448,10 +449,8 @@
   bottom: 1px;
 }
 
-.vertically-center-col {
-  div[class*='col-'] {
-    align-self: center;
-  }
+.vertically-center-col > div[class*='col-'] {
+  align-self: center;
 
   // remove margin to better vertically align
   // some elements need to be nested within a container, and others are directly within .no-card/.card
@@ -567,13 +566,9 @@
 
 // Desktop layout options depdendent on mobile breakpoint
 @include media-breakpoint-up(lg) {
-  .row-equal-column-heights {
-    div[class*='col-'] {
-      .card,
-      .no-card {
-        height: 100%;
-      }
-    }
+  .row-equal-column-heights > div[class*='col-'] > .card,
+  .no-card {
+    height: 100%;
   }
 
   .section-row {