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(() => { > @@ -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) {