From 5747109f14e4e1ed61b21d99ad19ce3d351c2a27 Mon Sep 17 00:00:00 2001
From: Saurabh Thapliyal <98493730+Saurabh-2003@users.noreply.github.com>
Date: Wed, 6 Aug 2025 00:17:55 +0530
Subject: [PATCH] fix(console): fix shrinking hover background on clear flow
 button (#10269)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 .../app/pages/actions/actions.component.scss   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/console/src/app/pages/actions/actions.component.scss b/console/src/app/pages/actions/actions.component.scss
index f15ca60676..6798d86c81 100644
--- a/console/src/app/pages/actions/actions.component.scss
+++ b/console/src/app/pages/actions/actions.component.scss
@@ -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 {