From 334f9f24fc232c779260602a969ebad71d7272d0 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 18 Aug 2026 13:08:38 +0200
Subject: [PATCH] FIX - optically center VaultX activity filters

Offset the activity filter icons and labels together to compensate for the font baseline and Lucide SVG view boxes at the scaled phone size. Preserve equal alignment across all three filters and cover the optical offset in the contract test.
---
 frontend/src/views/apps/CryptoApp.contract.test.ts | 3 ++-
 frontend/src/views/apps/CryptoApp.vue              | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 86eb4a2..465c2d9 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -215,7 +215,8 @@ describe('VaultX crypto app contracts', () => {
     expect(source).toContain('class="activity-status__icon"')
     expect(source).toContain('<WalletCards :size="15" />')
     expect(source).toContain('top: 50%;')
-    expect(source).toContain('transform: translateY(-50%);')
+    expect(source).toContain('transform: translateY(calc(-50% - 1px));')
+    expect(source).toContain('transform: translateY(-1px);')
   })
 
   it('exposes a broad fictional market with dedicated logo marks', () => {
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index 0920886..1eda554 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -3581,7 +3581,7 @@ onUnmounted(() => {
   inset-inline-start: 10px;
   display: block;
   flex: 0 0 auto;
-  transform: translateY(-50%);
+  transform: translateY(calc(-50% - 1px));
 }
 .activity-filters :deep(.sky-segmented-button > span) {
   display: flex;
@@ -3592,6 +3592,7 @@ onUnmounted(() => {
   line-height: 1;
   text-align: center;
   white-space: nowrap;
+  transform: translateY(-1px);
 }
 :deep(.activity-filters.sky-segmented--strong .sky-segmented-button--active) {
   color: #fff;