CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(clients): Aadhaar show/hide icon spilling past the field border in KYC step

Browse Source 
.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.
This commit is contained in:
nitesh
2026-07-30 10:32:33 +05:30
parent 1efb520009
commit 29f1cdc646
1 changed files with 16 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/client-stepper/client-kyc-step/client-kyc-step.component.scss
+16
View File
@@ -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 */