github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

[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)

Browse source 
* 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
This commit is contained in:
M Fahru 2023-06-12 07:28:49 -07:00 committed by Copybot
parent d001c89801
commit 40e27a1636
1 changed files with 19 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
services/web/frontend/stylesheets/app/plans-v2.less
View file

@ -607,6 +607,20 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
margin-bottom: 15px; margin-bottom: 15px;
table-layout: fixed; table-layout: fixed;
width: 100%; 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, th,
td { td {
@ -644,6 +658,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
td { td {
vertical-align: middle; vertical-align: middle;
height: 100%;
&:first-child { &:first-child {
border-left: 0; border-left: 0;
@ -758,6 +773,10 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
.plans-v2-table-cell { .plans-v2-table-cell {
background-color: @white; background-color: @white;
padding: 6px; padding: 6px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
} }
.plans-v2-table-th-content { .plans-v2-table-th-content {