Merge pull request #19888 from overleaf/mf-new-plans-page-container-width-1280px

[web] Set new container width (1280px) and new main grid horizontal padding (16px) for all plans page redesign pages

GitOrigin-RevId: d266a8318dd4c2c90d9051bb58cca459799fca44

services/web/frontend/stylesheets/core/grid.less

@@ -74,3 +74,45 @@
 @media (min-width: @screen-lg-min) {
   .make-grid(lg);
 }
+
+.website-redesign {
+  // whitelist for the pages to use the new grid
+  // TODO: remove this whitelist once all pages are using the new grid
+  .plans-new-design,
+  .plans-page {
+    // Container widths
+    //
+    // Set the container width, and override it for fixed navbars in media queries.
+
+    .container {
+      .container-fixed(@grid-gutter-width-new);
+
+      @media (min-width: @screen-sm-min) {
+        width: @container-sm;
+      }
+      @media (min-width: @screen-md-min) {
+        width: @container-md;
+      }
+      @media (min-width: @screen-lg-min) {
+        width: @container-lg;
+      }
+      @media (min-width: @screen-xl-min) {
+        width: @container-xl;
+      }
+    }
+
+    // Row
+    //
+    // Rows contain and clear the floats of your columns.
+
+    .row {
+      .make-row(@grid-gutter-width-new);
+    }
+
+    // Columns
+    //
+    // Common styles for small and large grid columns
+
+    .make-grid-columns(@grid-gutter-width-new);
+  }
+}

services/web/frontend/stylesheets/core/mixins.less

@@ -948,11 +948,11 @@
 // -----------
 
 // Centered container element
-.container-fixed() {
+.container-fixed(@gutter: @grid-gutter-width) {
   margin-right: auto;
   margin-left: auto;
-  padding-left: (@grid-gutter-width / 2);
-  padding-right: (@grid-gutter-width / 2);
+  padding-left: (@gutter / 2);
+  padding-right: (@gutter / 2);
   &:extend(.clearfix all);
 }
 
@@ -1077,7 +1077,7 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `@grid-columns`.
 
-.make-grid-columns() {
+.make-grid-columns(@gutter: @grid-gutter-width) {
   // Common styles for all sizes of grid columns, widths 1-12
   .col(@index) when (@index = 1) {
     // initial
@@ -1096,8 +1096,8 @@
       // Prevent columns from collapsing when empty
       min-height: 1px;
       // Inner gutter via padding
-      padding-left: (@grid-gutter-width / 2);
-      padding-right: (@grid-gutter-width / 2);
+      padding-left: (@gutter / 2);
+      padding-right: (@gutter / 2);
     }
   }
   .col(1); // kickstart it

services/web/frontend/stylesheets/variables/all.less

@@ -368,22 +368,28 @@
 @screen-sm-min: @screen-sm;
 @screen-tablet: @screen-sm-min;
 
-// Medium screen / desktop
+// Medium screen / small desktop
 // Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
 @screen-md: 992px;
 @screen-md-min: @screen-md;
 @screen-desktop: @screen-md-min;
 
-// Large screen / wide desktop
+// Large screen / desktop
 // Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
 @screen-lg: 1200px;
 @screen-lg-min: @screen-lg;
 @screen-lg-desktop: @screen-lg-min;
 
+// Extra large screen / wide desktop
+@screen-xl: 1400px;
+@screen-xl-min: @screen-xl;
+@screen-xl-desktop: @screen-xl-min;
+
 // So media queries don't overlap when required, provide a maximum
 @screen-xs-max: (@screen-sm-min - 1);
 @screen-sm-max: (@screen-md-min - 1);
 @screen-md-max: (@screen-lg-min - 1);
+@screen-lg-max: (@screen-xl-min - 1);
 
 //== Grid system
 //
@@ -393,6 +399,7 @@
 @grid-columns: 12;
 //** Padding between columns. Gets divided in half for the left and right.
 @grid-gutter-width: 30px;
+@grid-gutter-width-new: 32px; // for website-redesign because the usage of 16px padding
 // Navbar collapse
 //** Point at which the navbar becomes uncollapsed.
 @grid-float-breakpoint: @screen-md-min;
@@ -408,16 +415,21 @@
 //** For `@screen-sm-min` and up.
 @container-sm: @container-tablet;
 
-// Medium screen / desktop
+// Medium screen / small desktop
 @container-desktop: ((940px + @grid-gutter-width));
 //** For `@screen-md-min` and up.
 @container-md: @container-desktop;
 
-// Large screen / wide desktop
+// Large screen / desktop
 @container-large-desktop: ((1140px + @grid-gutter-width));
 //** For `@screen-lg-min` and up.
 @container-lg: @container-large-desktop;
 
+// Extra large screen / wide desktop
+@container-wide-desktop: ((1248px + @grid-gutter-width-new)); // 1280px
+//** For `@screen-xl-min` and up.
+@container-xl: @container-wide-desktop;
+
 //== Navbar
 //
 //##