mirror of
https://github.com/zitadel/zitadel
synced 2024-11-22 00:39:36 +00:00
fix: add a height element to mat-calendar-table-header that works for FF (#8159)
# Which Problems Are Solved - In Firefox there's an issue with mat-calendar. The header for days of the week has a height that fills the entire space making dates to overlap. This happens for both Personal Access Tokens and Keys dialogs. ![image](https://github.com/zitadel/zitadel/assets/30386061/78cc183d-f73d-4667-9281-64981092cc3e) # How the Problems Are Solved - In FF there seems to be a problem with the following style in tables.scss. If I remove that style in FF everything works fine: ``` th, td { padding: 0 0.5rem !important; } ``` Although I tried to override it or remove !important I didn't like the idea of having side effects all around the tables. As the issue was the height for the header I tried to add a fixed height for the th elements using a new specific selector in the tables.scss file. That way FF seems to calculate the right height for the header and dates are shown correctly. If @peintnermax agrees maybe an issue can be opened for a future work to remove as many !important properties as possible Here's a screenshot for FF ![image](https://github.com/zitadel/zitadel/assets/30386061/6d9e47d3-8cc1-4d45-a01d-8d7a00eb010b) And another one for Chrome ![image](https://github.com/zitadel/zitadel/assets/30386061/ca83a004-9d12-4182-a768-61dc943a1aa2) Maybe it's not too elegant but as it seems a bug on Firefox I think it's a contained solution. # Additional Context - Closes #7877 Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
parent
88fe25911b
commit
50c1d638d7
@ -76,6 +76,10 @@
|
||||
padding: 0 0.5rem !important;
|
||||
}
|
||||
|
||||
.mat-calendar-table-header tr th {
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
td .mat-mdc-checkbox,
|
||||
th .mat-checkbox {
|
||||
margin-left: 1rem;
|
||||
|
Loading…
Reference in New Issue
Block a user