From bcb0a01cbab46c71be5c8460e6fcff349185ebf9 Mon Sep 17 00:00:00 2001
From: "smx.pusha" <139338836+smxpusha@users.noreply.github.com>
Date: Wed, 19 Aug 2026 07:39:06 +0200
Subject: [PATCH] FIX - correct Feather suggestion controls

Keep the suggestion profile trigger separate from the shared follow button so the follow label no longer stretches across profile cards. Use the shared Sky scroll rail with a visible CEF-compatible scrollbar for mouse-wheel and pointer navigation, and cover the layout contract with focused tests.
---
 .../views/apps/FeatherApp.contract.test.ts    | 21 ++++++++++
 frontend/src/views/apps/FeatherApp.vue        | 40 ++++++++++++++-----
 2 files changed, 52 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/apps/FeatherApp.contract.test.ts b/frontend/src/views/apps/FeatherApp.contract.test.ts
index 3c96d4a..a607df7 100644
--- a/frontend/src/views/apps/FeatherApp.contract.test.ts
+++ b/frontend/src/views/apps/FeatherApp.contract.test.ts
@@ -175,4 +175,25 @@ describe('FeatherApp Sky UI contract', () => {
       /\.feather-app--active \.feather-profile__logout\s*\{[^}]*--sky-app-accent:\s*#fff/s,
     )
   })
+
+  it('keeps suggestion profile geometry off the follow button', () => {
+    expect(source).toContain('<SkyScrollRail')
+    expect(source).toContain('class="feather-profile-suggestions__rail"')
+    expect(source).toContain(':label="t(\'people\')"')
+    expect(source).toContain(
+      'class="feather-profile-suggestion__profile"',
+    )
+    expect(source).toMatch(
+      /\.feather-app\.feather-app--active \.feather-profile-suggestion__profile\s*\{[^}]*width:\s*100%/s,
+    )
+    expect(source).toMatch(
+      /\.feather-app\.feather-app--active[\s\S]*?\.feather-profile-suggestion[\s\S]*?> :deep\(\.sky-button\)\s*\{[^}]*width:\s*auto/s,
+    )
+    expect(source).not.toContain(
+      '.feather-profile-suggestion > button',
+    )
+    expect(source).toMatch(
+      /\.feather-profile-suggestions__rail::-webkit-scrollbar\s*\{[^}]*display:\s*block[^}]*height:\s*5px/s,
+    )
+  })
 })
diff --git a/frontend/src/views/apps/FeatherApp.vue b/frontend/src/views/apps/FeatherApp.vue
index 48d5ce3..2dd7ec7 100644
--- a/frontend/src/views/apps/FeatherApp.vue
+++ b/frontend/src/views/apps/FeatherApp.vue
@@ -47,6 +47,7 @@ import {
   SkyPillNavigation,
   SkyAppPage,
   SkyScrollArea,
+  SkyScrollRail,
   SkySpinner,
   SkySearchbar,
   SkySegmented,
@@ -1708,13 +1709,20 @@ onMounted(async () => {
           class="feather-profile-suggestions"
         >
           <h2>{{ t('people') }}</h2>
-          <div class="feather-profile-suggestions__rail">
+          <SkyScrollRail
+            class="feather-profile-suggestions__rail"
+            :label="t('people')"
+          >
             <article
               v-for="person in feather.suggestions"
               :key="person.id"
               class="feather-profile-suggestion"
             >
-              <button type="button" @click="openProfile(person.id)">
+              <button
+                type="button"
+                class="feather-profile-suggestion__profile"
+                @click="openProfile(person.id)"
+              >
                 <span class="feather-avatar feather-profile-suggestion__avatar">
                   <img
                     v-if="person.avatar_url"
@@ -1743,7 +1751,7 @@ onMounted(async () => {
                 {{ person.is_following ? t('following') : t('follow') }}
               </SkyButton>
             </article>
-          </div>
+          </SkyScrollRail>
         </section>
       </SkyScrollArea>
 
@@ -3490,7 +3498,7 @@ onMounted(async () => {
   height: 76px;
   background: linear-gradient(135deg, #123d64, #1d9bf0);
 }
-.dark.feather-app .feather-profile-suggestion > button {
+.dark.feather-app .feather-profile-suggestion__profile {
   display: flex;
   width: 100%;
   flex-direction: column;
@@ -4688,11 +4696,24 @@ onMounted(async () => {
   font-size: 16px;
 }
 .feather-app.feather-app--active .feather-profile-suggestions__rail {
-  display: flex;
   gap: 9px;
-  overflow-x: auto;
-  padding: 0 13px;
-  scrollbar-width: none;
+  padding: 0 13px 7px;
+  scrollbar-color: var(--feather-muted) transparent;
+  scrollbar-width: thin;
+}
+.feather-app.feather-app--active
+  .feather-profile-suggestions__rail::-webkit-scrollbar {
+  display: block;
+  height: 5px;
+}
+.feather-app.feather-app--active
+  .feather-profile-suggestions__rail::-webkit-scrollbar-track {
+  background: transparent;
+}
+.feather-app.feather-app--active
+  .feather-profile-suggestions__rail::-webkit-scrollbar-thumb {
+  border-radius: var(--sky-radius-pill);
+  background: rgba(113, 118, 123, 0.68);
 }
 .feather-app.feather-app--active .feather-profile-suggestion {
   position: relative;
@@ -4708,7 +4729,7 @@ onMounted(async () => {
 .feather-app--active.feather-app--light .feather-profile-suggestion {
   background: #fff;
 }
-.feather-app.feather-app--active .feather-profile-suggestion > button {
+.feather-app.feather-app--active .feather-profile-suggestion__profile {
   display: grid;
   width: 100%;
   grid-template-columns: 42px minmax(0, 1fr);
@@ -4759,6 +4780,7 @@ onMounted(async () => {
   top: 10px;
   right: 9px;
   bottom: auto;
+  width: auto;
   min-width: 56px;
   min-height: 27px;
   padding-inline: 8px;