From 50c1d638d732e98ec03f40e37a1aab991387eb2c Mon Sep 17 00:00:00 2001
From: Miguel Cabrerizo <30386061+doncicuto@users.noreply.github.com>
Date: Thu, 4 Jul 2024 09:29:18 +0200
Subject: [PATCH] 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>
---
 console/src/styles/table.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/console/src/styles/table.scss b/console/src/styles/table.scss
index 68457949c3..933366607e 100644
--- a/console/src/styles/table.scss
+++ b/console/src/styles/table.scss
@@ -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;