mirror of
https://github.com/zitadel/zitadel.git
synced 2025-08-11 10:47:37 +00:00
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>
This commit is contained in:

committed by
Stefan Benz

parent
850bd8a813
commit
a2938416d5
@@ -66,18 +66,24 @@
|
||||
|
||||
.type-icon {
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.type-button-icon,
|
||||
.type-icon,
|
||||
span {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.type-icon,
|
||||
.type-button-icon {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
> span {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
button[mat-icon-button] {
|
||||
margin-right: 0;
|
||||
|
||||
.type-button-icon {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trigger-wrapper {
|
||||
|
Reference in New Issue
Block a user