From d43efc2d7c532b1bfa8fb3f1f90d2c0b5e84b1d7 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Tue, 24 Sep 2024 10:04:24 -0500
Subject: [PATCH] Merge pull request #20523 from overleaf/jel-cms-padding-fix

[web] CMS BS5 - Fix mobile top padding when columns reversed, apply `max-width` to rows as cards

GitOrigin-RevId: 0c8745c171dc8e24389b2e54e4d6fd605c30e145
---
 .../frontend/stylesheets/bootstrap-5/pages/cms.scss   | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index 39b7100d56..8285b684f7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
@@ -475,6 +475,17 @@
 
     .reverse-col-order-mobile {
       flex-direction: column-reverse;
+
+      // 1st column is displayed as 2nd column on mobile when reversed
+      div[class*='col-'] {
+        &:not(:last-child) {
+          padding-top: var(--spacing-13);
+        }
+
+        &:last-child {
+          padding-top: 0; // unset padding from default rows above
+        }
+      }
     }
   }
 }