From cc7667f037c40ed18bd67605f2ba11a76ba5b2df Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Sun, 16 Aug 2026 19:48:56 +0200
Subject: [PATCH] FIX - match App Store install action size

Align the installing progress action with the GET button dimensions in App Store lists and the detail view. Add contract coverage for both layouts.
---
 .../views/apps/AppStoreApp.contract.test.ts   |  3 +++
 frontend/src/views/apps/AppStoreApp.vue       | 20 +++++++++++++++++--
 .../apps/AppStoreDetail.contract.test.ts      |  3 +++
 frontend/src/views/apps/AppStoreDetail.vue    |  6 ++++--
 4 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/apps/AppStoreApp.contract.test.ts b/frontend/src/views/apps/AppStoreApp.contract.test.ts
index 4ecb3a8..013ab7f 100644
--- a/frontend/src/views/apps/AppStoreApp.contract.test.ts
+++ b/frontend/src/views/apps/AppStoreApp.contract.test.ts
@@ -270,6 +270,9 @@ describe('AppStoreApp Sky navigation contract', () => {
     expect(source).toMatch(
       /\.store-ranking li > button\.store-action-button--get:not\(\.store-ranking__detail-link\),[\s\S]*?\.store-list article > button\.store-action-button--get:not\(\.store-list__detail-link\)\s*\{[^}]*width:\s*56px;[^}]*min-width:\s*56px;[^}]*min-height:\s*32px;[^}]*height:\s*32px;[^}]*font-size:\s*11px;[^}]*font-weight:\s*850;/s,
     )
+    expect(source).toMatch(
+      /\.store-ranking li > button\.store-action-button--icon:not\(\.store-ranking__detail-link\),[\s\S]*?\.store-list article > button\.store-action-button--icon:not\(\.store-list__detail-link\)\s*\{[^}]*width:\s*56px;[^}]*min-width:\s*56px;[^}]*min-height:\s*32px;[^}]*height:\s*32px;/s,
+    )
     expect(source).not.toContain(':has(')
     expect(source).not.toContain('color-mix(')
   })
diff --git a/frontend/src/views/apps/AppStoreApp.vue b/frontend/src/views/apps/AppStoreApp.vue
index fdeae36..44c0715 100644
--- a/frontend/src/views/apps/AppStoreApp.vue
+++ b/frontend/src/views/apps/AppStoreApp.vue
@@ -2759,8 +2759,10 @@ watch(
 .store-browse-feature footer > .store-action-button--icon,
 .store-search__recommendations article > .store-action-button--icon,
 .store-list article > .store-action-button--icon {
-  width: var(--sky-touch-target);
-  min-width: var(--sky-touch-target);
+  width: 54px;
+  min-width: 54px;
+  min-height: 30px;
+  height: 30px;
   padding: 0;
   border-color: transparent;
   color: var(--sky-app-accent);
@@ -2799,6 +2801,20 @@ watch(
   letter-spacing: 0.04em;
 }
 
+.store-ranking li > button.store-action-button--icon:not(.store-ranking__detail-link),
+.store-browse-feature
+  footer
+  > button.store-action-button--icon:not(.store-browse-feature__details),
+.store-search__recommendations
+  article
+  > button.store-action-button--icon:not(.store-search__detail-link),
+.store-list article > button.store-action-button--icon:not(.store-list__detail-link) {
+  width: 56px;
+  min-width: 56px;
+  min-height: 32px;
+  height: 32px;
+}
+
 .store-installing {
   color: var(--sky-app-accent);
 }
diff --git a/frontend/src/views/apps/AppStoreDetail.contract.test.ts b/frontend/src/views/apps/AppStoreDetail.contract.test.ts
index 283c670..d1d55e2 100644
--- a/frontend/src/views/apps/AppStoreDetail.contract.test.ts
+++ b/frontend/src/views/apps/AppStoreDetail.contract.test.ts
@@ -25,6 +25,9 @@ describe('AppStoreDetail contract', () => {
     expect(source).toMatch(
       /\.store-detail__hero \.store-detail__action--get\s*\{[^}]*min-width:\s*54px;[^}]*min-height:\s*30px;[^}]*height:\s*30px;/s,
     )
+    expect(source).toMatch(
+      /\.store-detail__hero \.store-detail__action--icon\s*\{[^}]*width:\s*54px;[^}]*min-width:\s*54px;[^}]*min-height:\s*30px;[^}]*height:\s*30px;/s,
+    )
     expect(source).not.toContain(':has(')
     expect(source).toMatch(
       /\.store-detail\s*\{[^}]*padding:\s*var\(--sky-space-3\) 0 var\(--sky-space-6\)/s,
diff --git a/frontend/src/views/apps/AppStoreDetail.vue b/frontend/src/views/apps/AppStoreDetail.vue
index 05971a9..793d322 100644
--- a/frontend/src/views/apps/AppStoreDetail.vue
+++ b/frontend/src/views/apps/AppStoreDetail.vue
@@ -385,8 +385,10 @@ function updateActivePreview(): void {
 }
 
 .store-detail__hero .store-detail__action--icon {
-  width: var(--sky-touch-target);
-  min-width: var(--sky-touch-target);
+  width: 54px;
+  min-width: 54px;
+  min-height: 30px;
+  height: 30px;
   padding: 0;
   color: var(--sky-app-accent);
   background: transparent;