From 23ed75f8f3ce71870913032baf5c101c090114ff Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 18 Aug 2026 13:46:40 +0200
Subject: [PATCH] FIX - unify VaultX sheet grabber

Render the sheet gradient once on the panel so the transparent drag area joins the content without a background seam. Make the grabber an accessible close button while preserving swipe dismissal.
---
 .../src/views/apps/CryptoApp.contract.test.ts |  3 +++
 frontend/src/views/apps/CryptoApp.vue         | 26 ++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 9324ea4..30ca660 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -180,6 +180,9 @@ describe('VaultX crypto app contracts', () => {
     expect(source).toContain('class="sheet-close"')
     expect(source).toContain("v-if=\"sheet === 'trade' || sheet === 'send'\"")
     expect(source).toContain('class="sheet-market-summary"')
+    expect(source).toContain('grabber-clickable')
+    expect(source).toContain('@grabberclick="closeSheet"')
+    expect(source).toContain('.crypto-app :deep(.sky-sheet__grabber::after)')
   })
 
   it('uses a wide close-free settlement form with composed fields', () => {
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index 8efcf38..4e49e7f 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -1618,8 +1618,11 @@ onUnmounted(() => {
     <SkySheet
       :opened="sheet !== null"
       swipe-to-close
+      grabber-clickable
+      :grabber-label="phone.t('Common.close')"
       @backdropclick="closeSheet"
       @escape="closeSheet"
+      @grabberclick="closeSheet"
       @swipeclose="closeSheet"
       ><div
         v-if="sheet"
@@ -4065,16 +4068,6 @@ onUnmounted(() => {
   max-height: calc(100% - var(--sky-safe-area-top) - 20px);
   overflow-y: auto;
   color: #f8fbfd;
-  background: #0d1219;
-  border: 1px solid rgba(255, 255, 255, 0.09);
-  border-bottom: 0;
-  border-radius: 28px 28px 0 0;
-  box-shadow: 0 -22px 70px rgba(0, 0, 0, 0.52);
-}
-.crypto-app :deep(.sky-sheet__grabber) {
-  background: rgba(255, 255, 255, 0.2);
-}
-.sheet {
   background:
     radial-gradient(
       circle at 92% 0%,
@@ -4082,6 +4075,19 @@ onUnmounted(() => {
       transparent 27%
     ),
     #0d1219;
+  border: 1px solid rgba(255, 255, 255, 0.09);
+  border-bottom: 0;
+  border-radius: 28px 28px 0 0;
+  box-shadow: 0 -22px 70px rgba(0, 0, 0, 0.52);
+}
+.crypto-app :deep(.sky-sheet__grabber) {
+  background: transparent;
+}
+.crypto-app :deep(.sky-sheet__grabber::after) {
+  background: rgba(255, 255, 255, 0.2);
+}
+.sheet {
+  background: transparent;
 }
 .sheet-header,
 .sheet-heading,