Prechádzať zdrojové kódy

[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
M Fahru 3 rokov pred
rodič
commit
40e27a1636

+ 19 - 0
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 {