Merge pull request #19210 from overleaf/jel-cms-flex

[web] Add flex layout handling for CMS pages

GitOrigin-RevId: d7c2806449fba19dc81356deef9b9f61deff14c4

services/web/frontend/stylesheets/app/cms-page.less

@@ -398,6 +398,23 @@
   bottom: 1px;
 }
 
+// `Layout | Grid` display options
+.row-equal-column-heights {
+  @media (min-width: @screen-sm-min) {
+    display: flex;
+    flex-flow: row wrap;
+
+    div[class*='col-'] {
+      display: flex;
+      flex-direction: column;
+      .card,
+      .no-card {
+        height: 100%;
+      }
+    }
+  }
+}
+
 .vertically-center-col {
   // remove margin to better vertically align
   // some elements need to be nested within a container, and others are directly within .no-card/.card
@@ -618,3 +635,13 @@
     }
   }
 }
+
+.bottom-align-last-entry {
+  display: flex;
+  flex-direction: column;
+  * {
+    &:last-child {
+      margin-top: auto;
+    }
+  }
+}

services/web/frontend/stylesheets/components/card.less

@@ -114,7 +114,6 @@
   &.card-purple-top-border {
     background-color: white;
     border-radius: 8px;
-    height: 100%;
     box-shadow:
       0px 2px 4px 0px #1e253014,
       0px 4px 12px 0px #1e25301f;