TheArchive/zitadel

mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 10:37:44 +00:00

Files

History

Saurabh Thapliyal a2938416d5 fix(console): fix shrinking hover background on clear flow button (#10269 )

## Problem
The mat-icon-button in the actions flow-type section had a shrinking
hover background. The hover effect was not displaying properly and
appeared constrained.

## Root Cause
The margin rules were being applied to all `span` elements, including
the Material button's internal elements (like `.mat-mdc-button-label`),
which interfered with the button's hover background positioning.

## Solution
- Changed the span selector from `span` to `> span` to target only
direct children
- Added specific margin reset for the button (`margin-right: 0`)
- Added margin reset for the icon inside the button
- This allows the Material button to use its default hover behavior

## Testing
- [x] No visual regressions in text spacing or layout
- [x] Button hover background now displays as a proper circle
- [x] Other buttons on the page remain unaffected
- [x] Matches the behavior of working buttons in trigger sections

## Type of Change
- [x] Bug fix (non-breaking change which fixes an UI issue)


Before :
<img width="427" height="411" alt="Screenshot 2025-07-15 at 6 08 35 PM"
src="https://github.com/user-attachments/assets/f728e1fa-6711-4e8b-ba24-2a84329f50d7"
/>

After fix :
<img width="406" height="404" alt="Screenshot 2025-07-15 at 6 09 36 PM"
src="https://github.com/user-attachments/assets/27d7b08d-684d-4094-8334-844a4e459025"
/>

Fixes hover background issue in actions flow-type section.

---------

Co-authored-by: Saurabh Thapliyal <saurabh@southguild.tech>
Co-authored-by: Marco A. <marco@zitadel.com>

2025-08-08 11:00:08 +02:00

..

fix(console): fix shrinking hover background on clear flow button (#10269 )

2025-08-08 11:00:08 +02: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

feat: Use V2 API's in Console (#9312 )

2025-02-17 19:25:46 +01: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

fix(FE): allow only enabled factors to be displayed on user page (#9313 )

2025-06-12 07:09:46 +02: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: Posthog integration (#9077 )

2025-01-30 07:57:51 +01:00

tsconfig.spec.json

chore(console): dependency update (#5653 )

2023-04-18 15:42:29 +02:00

yarn.lock

fix(FE): allow only enabled factors to be displayed on user page (#9313 )

2025-06-12 07:09:46 +02: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.