fix(shares): fix popup fixed-position bug, add Client Compliance card

backdrop-filter on the list-embedded review popup was making it a new
containing block for its own nested position:fixed dialogs (Validate,
Reject, Confirm-Submit), confining them to the popup's box instead of the
viewport — replaced the blur with a plain darker overlay. Also adds a
permanent Client Compliance card (KYC status, risk category, open AML
alerts) on the review screen so a manager can see it without opening the
Validate popup.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-05 18:32:48 +05:30
co-authored by Claude Sonnet 5
parent cc5cd4c6ab
commit 2cc8d979ba
3 changed files with 69 additions and 4 deletions
@@ -63,6 +63,44 @@
</div>
</div>
@if (isReview && reviewRequest) {
<div class="pg-card">
<div class="pos-section-label">Client Compliance</div>
<div class="inv-form-grid" style="padding: 16px">
<div class="inv-form-field">
<span>KYC Status</span>
<span
class="swr-chip"
[class.swr-chip--ok]="reviewRequest.client_kyc_verified"
[class.swr-chip--warn]="!reviewRequest.client_kyc_verified"
>
{{ reviewRequest.client_kyc_status_label }}
</span>
</div>
<div class="inv-form-field">
<span>Risk Category</span>
<span
class="swr-chip"
[class.swr-chip--ok]="!reviewRequest.client_risk_high"
[class.swr-chip--warn]="reviewRequest.client_risk_high"
>
{{ reviewRequest.client_risk_category_label }}
</span>
</div>
<div class="inv-form-field">
<span>Open AML Alerts</span>
<span
class="swr-chip"
[class.swr-chip--ok]="!reviewRequest.client_open_aml_alerts"
[class.swr-chip--warn]="reviewRequest.client_open_aml_alerts > 0"
>
{{ reviewRequest.client_open_aml_alerts || 0 }}
</span>
</div>
</div>
</div>
}
@if (account) {
<div class="pg-card">
<div class="pos-section-label">Withdrawal Details</div>
@@ -58,6 +58,26 @@
font-weight: 600;
}
.swr-chip {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
&--ok {
background: #eafaf0;
color: #1a7f37;
}
&--warn {
background: #fdecea;
color: #b42318;
}
}
/* ---------- Verification trigger card ---------- */
.swrv-trigger {
display: flex;
@@ -138,8 +158,11 @@
.swrv-modal {
position: fixed;
inset: 0;
background: rgb(15 25 45 / 55%);
backdrop-filter: blur(3px);
// No backdrop-filter: it would make this element a containing block for any position:fixed
// descendant (e.g. if this modal is ever nested inside another fixed popup, or gains one of its
// own later) — see the identical fix in share-withdrawal-requests.component.scss for the bug this
// caused. Extra opacity compensates for the loss of the blur look.
background: rgb(15 25 45 / 65%);
z-index: 1200;
display: flex;
align-items: center;
@@ -31,8 +31,12 @@
.swr-list-popup-backdrop {
position: fixed;
inset: 0;
background: rgb(15 25 45 / 55%);
backdrop-filter: blur(3px);
// No backdrop-filter here: filter/backdrop-filter on an ancestor makes browsers treat it as a new
// containing block for `position: fixed` descendants — the embedded review screen inside this popup
// renders its OWN fixed-position dialogs (Validate, Reject, Confirm-Submit), which would then be
// confined to this backdrop's box instead of the real viewport. Extra opacity on the background
// color compensates for the loss of the blur look.
background: rgb(15 25 45 / 65%);
z-index: 1100;
display: flex;
align-items: flex-start;