From 46cc91fac8bd79ed0ac0b4aed6bc9a6dd3ca0846 Mon Sep 17 00:00:00 2001
From: Kristina <7614497+khjrtbrg@users.noreply.github.com>
Date: Tue, 7 Jan 2025 09:57:34 +0100
Subject: [PATCH] [web] plans page spacing updates (#22624)

* make the global seat picker wider to avoid the English label wrapping
* make the plans table take up most of the page
* fixes borders on plans table

GitOrigin-RevId: facd30a860cf270ffbe80052e6fe449201fb9aaa
---
 .../app/plans/plans-new-design.less           | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/services/web/frontend/stylesheets/app/plans/plans-new-design.less b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
index 41ada61489..3456a86191 100644
--- a/services/web/frontend/stylesheets/app/plans/plans-new-design.less
+++ b/services/web/frontend/stylesheets/app/plans/plans-new-design.less
@@ -16,7 +16,9 @@
 @group-member-picker-top-height: 36px;
 @group-member-picker-sm-width: 50%;
 @group-member-picker-md-width: 25%;
+@group-member-picker-min-width: 234px;
 
+@container-plans-responsive-width: 95%;
 @table-4-column-width: 25%;
 @table-5-column-width: 20%;
 
@@ -28,6 +30,13 @@
   .container {
     padding: 0 var(--spacing-06);
 
+    @media (min-width: @screen-sm-min) {
+      width: @container-plans-responsive-width;
+    }
+    @media (min-width: @screen-xl-min) {
+      width: @container-xl;
+    }
+
     .geo-banner-container {
       margin-top: var(--spacing-08);
     }
@@ -321,6 +330,10 @@
   .plans-new-table {
     width: 100%;
 
+    // keep the borders separate to help with spacing and alignment in the CTAs
+    border-collapse: separate;
+    border-spacing: 0;
+
     th,
     td {
       width: @table-4-column-width;
@@ -368,6 +381,12 @@
       @media (max-width: @screen-md-max) {
         padding-bottom: var(--spacing-05);
       }
+
+      // use transparent borders to use the same spacing as highlighted cells
+      &:not(.plans-new-table-highlighted-cell) {
+        border-right: var(--border-width-base) solid transparent;
+        border-left: var(--border-width-base) solid transparent;
+      }
     }
 
     .btn-block + .btn-block {
@@ -433,6 +452,7 @@
     }
     @media (min-width: @screen-md-min) {
       width: @group-member-picker-md-width;
+      min-width: @group-member-picker-min-width; // ensure checkbox title doesn't wrap in English
     }
   }