From e128408c8d9700af3062c0e6f0a5df575bcb0e39 Mon Sep 17 00:00:00 2001
From: "Leon.Schmidt" <leonmauricewill15@gmail.com>
Date: Tue, 18 Aug 2026 14:34:25 +0200
Subject: [PATCH] FIX - align FlipTok profile controls

Match the video profile action container to the avatar geometry so the follow control centers beneath the image. Remove visible authentication header titles while retaining accessible labels, and anchor connection fallbacks to their avatar frames.
---
 .../src/views/apps/FlipTokApp.contract.test.ts   | 12 +++++++++---
 frontend/src/views/apps/FlipTokApp.vue           | 16 +++++++++-------
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/frontend/src/views/apps/FlipTokApp.contract.test.ts b/frontend/src/views/apps/FlipTokApp.contract.test.ts
index 2809b77..5d93481 100644
--- a/frontend/src/views/apps/FlipTokApp.contract.test.ts
+++ b/frontend/src/views/apps/FlipTokApp.contract.test.ts
@@ -138,7 +138,10 @@ describe('FlipTokApp Sky UI contract', () => {
       'video.is_following || followPendingIds.has(video.id)',
     )
     expect(source).toMatch(
-      /\.video-actions \.follow-dot\s*\{[^}]*min-width: 20px !important;[^}]*min-height: 20px !important;[^}]*place-items: center;/s,
+      /\.video-actions \.follow-dot\s*\{[^}]*bottom:\s*-2px;[^}]*min-width: 20px !important;[^}]*min-height: 20px !important;[^}]*place-items: center;/s,
+    )
+    expect(source).toMatch(
+      /\.video-profile-action\s*\{[^}]*width:\s*44px;[^}]*min-height:\s*48px;[^}]*justify-items:\s*center;/s,
     )
   })
 
@@ -162,13 +165,16 @@ describe('FlipTokApp Sky UI contract', () => {
     expect(source).toContain('@click="followConnection(profile)"')
   })
 
-  it('labels authentication modes and centers connection avatar fallbacks', () => {
+  it('hides authentication header names and centers avatar fallbacks', () => {
     expect(source).toContain(
+      ":aria-label=\"t(authMode === 'login' ? 'login' : 'register')\"",
+    )
+    expect(source).not.toContain(
       ":title=\"t(authMode === 'login' ? 'login' : 'register')\"",
     )
     expect(source).toContain('class="connection-avatar__fallback"')
     expect(source).toMatch(
-      /\.connections-list \.connection-avatar__fallback\s*\{[^}]*display:\s*grid;[^}]*place-items:\s*center;/s,
+      /\.connections-list \.connection-avatar__fallback\s*\{[^}]*position:\s*absolute;[^}]*inset:\s*0;[^}]*display:\s*grid;[^}]*place-items:\s*center;/s,
     )
   })
 
diff --git a/frontend/src/views/apps/FlipTokApp.vue b/frontend/src/views/apps/FlipTokApp.vue
index 7432bec..2cf2756 100644
--- a/frontend/src/views/apps/FlipTokApp.vue
+++ b/frontend/src/views/apps/FlipTokApp.vue
@@ -1777,7 +1777,7 @@ onBeforeUnmount(() => {
     >
       <SkyNavbar
         class="fliptok-auth__navbar"
-        :title="t(authMode === 'login' ? 'login' : 'register')"
+        :aria-label="t(authMode === 'login' ? 'login' : 'register')"
         :scroll-el="null"
         variant="medium"
       />
@@ -5461,8 +5461,8 @@ onBeforeUnmount(() => {
 
 .video-profile-action {
   position: relative;
-  width: 40px;
-  min-height: 44px;
+  width: 44px;
+  min-height: 48px;
   display: grid;
   justify-items: center;
 }
@@ -5905,6 +5905,7 @@ onBeforeUnmount(() => {
 
 /* The avatar follow control must not inherit the generic action height. */
 .video-actions .follow-dot {
+  bottom: -2px;
   width: 20px !important;
   height: 20px !important;
   min-width: 20px !important;
@@ -6061,7 +6062,8 @@ onBeforeUnmount(() => {
   place-items: center;
 }
 
-.connections-list .connection-avatar {
+.connections-list .connection-profile > .connection-avatar {
+  position: relative;
   display: grid;
   place-items: center;
   line-height: 1;
@@ -6069,12 +6071,12 @@ onBeforeUnmount(() => {
 }
 
 .connections-list .connection-avatar__fallback {
-  width: 100%;
-  height: 100%;
+  position: absolute;
+  inset: 0;
   display: grid;
   place-items: center;
   line-height: 1;
-  transform: translateY(-0.5px);
+  text-align: center;
 }
 
 .connections-list :deep(.sky-button:disabled) {