From 40e27a16369b0564f81148d5548c6ba13160ffaf Mon Sep 17 00:00:00 2001
From: M Fahru <m.fahru@overleaf.com>
Date: Mon, 12 Jun 2023 07:28:49 -0700
Subject: [PATCH] [web][plans-page] Fix UI bug where some of the plans table
 cell's child doesn't fill their parent's height (both `td` and `th`) (#13391)

* Fix UI bug where some of the table cell's child doesn't fill their parent's height:

1. On plans-v2-table first row, every `th > div.plans-v2-table-th-content` element need to have a 100% height because they have a white background and their height has to fill the entire `th`.

2. On other rows, every `td > div.plans-v2-table-cell` element needs to have a 100% height with centered content, both vertically and horizontally. This is also because they have a white background and since each row can have a different height, 100% height is needed to make sure the white background is filling the `td` properly.

* Add a comment to explain the explicit `height` rule on `table.plans-v2-table` even though it will be ignored.

GitOrigin-RevId: 1ce059d1e2445213bc911a22dfb0ea984749597d
---
 .../frontend/stylesheets/app/plans-v2.less    | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less
index e5242c22b2..70d246d514 100644
--- a/services/web/frontend/stylesheets/app/plans-v2.less
+++ b/services/web/frontend/stylesheets/app/plans-v2.less
@@ -607,6 +607,20 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
   margin-bottom: 15px;
   table-layout: fixed;
   width: 100%;
+  // We want these `div` inside `th` and `td` to have a 100% height:
+  // 1. `td > div.plans-v2-table-cell`
+  // 2. `th > div.plans-v2-table-th-content`
+  //
+  // To make both of them have 100% height of their respective `td` and `th`,
+  // we need to have the `table` has an explicit `height` rule.
+  // The value can be arbitrary, since it will be ignored by the browser
+  //
+  // See https://stackoverflow.com/a/56913789 for more details
+  height: 100%;
+
+  tr {
+    height: 100%;
+  }
 
   th,
   td {
@@ -644,6 +658,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
 
   td {
     vertical-align: middle;
+    height: 100%;
 
     &:first-child {
       border-left: 0;
@@ -758,6 +773,10 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
 .plans-v2-table-cell {
   background-color: @white;
   padding: 6px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .plans-v2-table-th-content {