Merge pull request #13234 from overleaf/jdt-subscriptions-cols-fix

fix col spacing on subscription page

GitOrigin-RevId: 886274f7b566632ac4f4ca3388d43b1b03575f6f

services/web/app/src/Features/Subscription/st-personal-off-default/plansConfig.js

@@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures')
 
 const config = {
   individual: {
+    maxColumn: 4,
     tableHead: {
       individual_free: {},
       individual_personal: {},

services/web/app/src/Features/Subscription/st-personal-off-variant/plansConfig.js

@@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures')
 
 const config = {
   individual: {
+    maxColumn: 3,
     tableHead: {
       individual_free: {},
       individual_collaborator: {},

services/web/app/views/subscriptions/plans-marketing/st-personal-off-default/v2/_mixins.pug

@@ -14,7 +14,7 @@ mixin plans_v2_table(period, config)
 	- var baseColspan = config.baseColspan || 1
 	- var maxColumn = config.maxColumn || 4
 	- var discountedColumn = config.discountedColumn || {}
-	tr
+	tr(class=`cols-${maxColumn}`)
 		th(colspan=baseColspan)
 		- for (var i = 0; i < maxColumn; i++)
 			- var tableHeadKey = Object.keys(config.tableHead)[i]
@@ -91,7 +91,7 @@ mixin plans_v2_table(period, config)
 							span )
 		for feature, featureIndex in featuresPerSection.items
 			tr(
-				class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '')
+				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
 			)
 				td(
 					event-tracking="plans-page-table"

services/web/app/views/subscriptions/plans-marketing/st-personal-off-variant/v2/_mixins.pug

@@ -14,7 +14,7 @@ mixin plans_v2_table(period, config)
 	- var baseColspan = config.baseColspan || 1
 	- var maxColumn = config.maxColumn || 4
 	- var discountedColumn = config.discountedColumn || {}
-	tr
+	tr(class=`cols-${maxColumn}`)
 		th(colspan=baseColspan)
 		- for (var i = 0; i < maxColumn; i++)
 			- var tableHeadKey = Object.keys(config.tableHead)[i]
@@ -89,7 +89,7 @@ mixin plans_v2_table(period, config)
 							span )
 		for feature, featureIndex in featuresPerSection.items
 			tr(
-				class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '')
+				class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
 			)
 				td(
 					event-tracking="plans-page-table"

services/web/frontend/stylesheets/app/plans-v2.less

@@ -535,8 +535,9 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
     }
   }
 
+  // for remove-personal-plan split test default variant
   @media (max-width: @screen-xs-max) {
-    tr:not(.plans-v2-table-divider) {
+    tr.cols-4:not(.plans-v2-table-divider) {
       td:not(:first-of-type),
       th:not(:first-of-type) {
         // 25% is because table-individual have 4 real columns on mobile
@@ -545,6 +546,16 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
         width: 25%;
       }
     }
+    // for remove-personal-plan split test personal-off variant
+    tr.cols-3:not(.plans-v2-table-divider) {
+      td:not(:first-of-type),
+      th:not(:first-of-type) {
+        // 33% is because table-individual have 3 real columns on mobile
+        // it actually has 4 table columns, but on mobile version, the first column become row
+        // we need to force 33% width to make each of 3 columns have an equal width of 1/3 screen width
+        width: calc(100% / 3);
+      }
+    }
 
     tr {
       &:last-child {