TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2024-12-04 23:45:07 +00:00
Code Issues Packages Projects Releases Wiki Activity
50c1d638d7
zitadel/console
History
Miguel Cabrerizo 50c1d638d7
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>
2024-07-04 07:29:18 +00:00
..
src fix: add a height element to mat-calendar-table-header that works for FF (#8159) 2024-07-04 07:29:18 +00:00
.editorconfig feat(console): integrate frontend (#95) 2020-05-13 14:41:43 +02:00
.eslintrc.js fix(console): update eslint, redirect user without roles, private labeling save and icon (#4459) 2022-09-29 05:25:57 +00:00
.gitignore chore(console): buf stub build (#5215) 2023-02-17 14:09:11 +00:00
.prettierignore chore(e2e): formatting with prettier (#4385) 2022-09-19 19:49:46 +02:00
.prettierrc fix(console): use authService for auth user page (#5233) 2023-02-27 12:03:44 +01:00
angular.json refactor: copy only required frameworks icons from docs in console (#7538) 2024-03-11 08:33:05 +00:00
buf.gen.yaml chore(console): buf stub build (#5215) 2023-02-17 14:09:11 +00:00
karma.conf.js feat(console): integrate frontend (#95) 2020-05-13 14:41:43 +02:00
ngsw-config.json fix: update assets in ngsw-config.json (#1027) 2020-11-27 16:32:14 +01:00
package.json feat(console): integrate app (#7417) 2024-02-28 16:52:21 +00:00
prebuild.development.js chore(dev): fix fetching http env json (#5921) 2023-05-24 13:07:55 +00:00
README.md docs(contributing): remove guides folder (#4603) 2022-10-24 08:43:24 +02:00
tsconfig.app.json fix(console): angular 15 (#4809) 2023-01-11 13:23:16 +00:00
tsconfig.json feat(console): integrate app (#7417) 2024-02-28 16:52:21 +00:00
tsconfig.spec.json chore(console): dependency update (#5653) 2023-04-18 15:42:29 +02:00
yarn.lock feat: provide option to limit (T)OTP checks (#7693) 2024-04-10 09:14:55 +00:00

README.md

Console

This project was generated with Angular CLI version 8.3.20.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Please refer to the contributing guide

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.