From 485df28b465b2ba42a045dcea410d59aa28826fc Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Tue, 18 Aug 2026 13:22:16 +0200
Subject: [PATCH] FIX - center VaultX activity filter groups

Group each activity filter icon and label into one content-sized flex row so the pair is centered as a unit instead of positioning the icon independently. Preserve the optical vertical offset and verify all three groups through the VaultX contract.
---
 .../src/views/apps/CryptoApp.contract.test.ts |  4 +-
 frontend/src/views/apps/CryptoApp.vue         | 44 ++++++++++---------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/src/views/apps/CryptoApp.contract.test.ts b/frontend/src/views/apps/CryptoApp.contract.test.ts
index 465c2d9..ddc0e3a 100644
--- a/frontend/src/views/apps/CryptoApp.contract.test.ts
+++ b/frontend/src/views/apps/CryptoApp.contract.test.ts
@@ -213,9 +213,9 @@ describe('VaultX crypto app contracts', () => {
     expect(source).toContain('class="activity-filter-panel"')
     expect(source).toContain('class="activity-filters"')
     expect(source).toContain('class="activity-status__icon"')
+    expect(source.match(/class="activity-filter-content"/g)).toHaveLength(3)
     expect(source).toContain('<WalletCards :size="15" />')
-    expect(source).toContain('top: 50%;')
-    expect(source).toContain('transform: translateY(calc(-50% - 1px));')
+    expect(source).not.toContain('inset-inline-start: 10px;')
     expect(source).toContain('transform: translateY(-1px);')
   })
 
diff --git a/frontend/src/views/apps/CryptoApp.vue b/frontend/src/views/apps/CryptoApp.vue
index 1eda554..d9e83c0 100644
--- a/frontend/src/views/apps/CryptoApp.vue
+++ b/frontend/src/views/apps/CryptoApp.vue
@@ -1365,21 +1365,27 @@ onUnmounted(() => {
               ><SkySegmentedButton
                 :active="activityFilter === 'all'"
                 @click="activityFilter = 'all'"
-                ><History :size="15" /><span>{{
-                  t('activity.filters.all')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><History :size="15" /><span>{{
+                    t('activity.filters.all')
+                  }}</span></span
+                ></SkySegmentedButton
               ><SkySegmentedButton
                 :active="activityFilter === 'trades'"
                 @click="activityFilter = 'trades'"
-                ><ChartNoAxesCombined :size="15" /><span>{{
-                  t('activity.filters.trades')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><ChartNoAxesCombined :size="15" /><span>{{
+                    t('activity.filters.trades')
+                  }}</span></span
+                ></SkySegmentedButton
               ><SkySegmentedButton
                 :active="activityFilter === 'wallet'"
                 @click="activityFilter = 'wallet'"
-                ><WalletCards :size="15" /><span>{{
-                  t('activity.filters.wallet')
-                }}</span></SkySegmentedButton
+                ><span class="activity-filter-content"
+                  ><WalletCards :size="15" /><span>{{
+                    t('activity.filters.wallet')
+                  }}</span></span
+                ></SkySegmentedButton
               ></SkySegmented
             >
           </div>
@@ -3575,25 +3581,21 @@ onUnmounted(() => {
     color var(--sky-transition-normal) ease,
     transform var(--sky-transition-fast) ease;
 }
-.activity-filters :deep(.sky-segmented-button svg) {
-  position: absolute;
-  top: 50%;
-  inset-inline-start: 10px;
-  display: block;
-  flex: 0 0 auto;
-  transform: translateY(calc(-50% - 1px));
-}
-.activity-filters :deep(.sky-segmented-button > span) {
-  display: flex;
+.activity-filters :deep(.activity-filter-content) {
+  display: inline-flex;
+  max-width: 100%;
+  gap: 6px;
   align-items: center;
   justify-content: center;
-  width: 100%;
   min-height: 15px;
   line-height: 1;
-  text-align: center;
   white-space: nowrap;
   transform: translateY(-1px);
 }
+.activity-filters :deep(.activity-filter-content svg) {
+  display: block;
+  flex: 0 0 auto;
+}
 :deep(.activity-filters.sky-segmented--strong .sky-segmented-button--active) {
   color: #fff;
 }