From 29f1cdc646bb9a4605511ae8d4f967e8cb4fd8d8 Mon Sep 17 00:00:00 2001 From: Nitesh Yadav Date: Thu, 30 Jul 2026 10:32:33 +0530 Subject: [PATCH] fix(clients): Aadhaar show/hide icon spilling past the field border in KYC step .toggle-vis-btn shrinks the visible mat-icon-button to 28px, but Material still reserves its default ~48px invisible touch-target/ripple centered on the button. Since the suffix container doesn't clip overflow, that ripple rendered past the input's own border on hover/focus, making the eye icon look like it was sitting outside/on top of the field edge. Constrained the touch-target and ripple to match the shrunk button. --- .../client-kyc-step.component.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss index d054a444c..2b9231705 100644 --- a/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss +++ b/src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss @@ -314,8 +314,24 @@ .toggle-vis-btn { width: 28px !important; height: 28px !important; + padding: 0 !important; font-size: 13px !important; color: #64748b; + + /* Material reserves a 48x48 invisible touch-target + ripple around every + mat-icon-button by default. Shrinking the button to 28px above doesn't + shrink that touch-target/ripple with it, so — since the suffix + container doesn't clip overflow — it visually spills out past the + field's own border, making the icon look misplaced/half-outside the box. */ + ::ng-deep .mat-mdc-button-touch-target { + width: 28px !important; + height: 28px !important; + } + + ::ng-deep .mat-mdc-button-persistent-ripple, + ::ng-deep .mat-ripple { + border-radius: 50%; + } } /* Verification Info Banner */