fix(frontend/friendly): 윈도우 크기를 조정하면 타임라인 탭의 하이라이트가 잘못된 위치에 표시될 수 있음 #…

…415

CHANGELOG_CHERRYPICK.md

@@ -31,6 +31,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 ### Client
 - Fix: (Friendly) 타임라인 헤더와 알림 위젯 헤더의 타이틀이 잘못 표시될 수 있음 (kokonect-link/cherrypick#461)
 - Fix: (Friendly) 사용자 프로필 페이지로 이동 시 알림 위젯 헤더의 디자인이 잘못 표시될 수 있음
+- Fix: (Friendly) 윈도우 크기를 조정하면 타임라인 탭의 하이라이트가 잘못된 위치에 표시될 수 있음 (kokonect-link/cherrypick#415)
 - Fix: 노트를 내보낼 때 노트의 편집 기록을 포함
 - Fix: MkA 컴포넌트를 사용하는 항목이 작동하지 않을 수 있음 (kokonect-link/cherrypick#422)
   - 알림의 읽음 표시, 테스트 알림, 기본 업로드 위치 등

packages/frontend/src/components/global/MkPageHeader.vue

@@ -59,7 +59,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkFollowButton :user="pageMetadata.avatar" :transparent="false" :full="!narrow"/>
 		</div>
 	</div>
-	<div v-if="((narrow && !hideTitle) || isFriendly) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_ }]">
+	<div v-if="((narrow && !hideTitle) || isFriendly) && hasTabs" :class="[$style.lower, { [$style.slim]: narrow && !isFriendly, [$style.thin]: thin_, [$style.lowerFriendly]: isFriendly}]">
+		<div v-if="!thin_ && isFriendly" :class="$style.buttonsLeft" style="min-width: 0; width: 0; margin-right: auto;">
+		</div>
 		<XTabs :class="$style.tabs" :tab="tab" :tabs="tabs" :rootEl="el" @update:tab="key => emit('update:tab', key)" @tabClick="onTabClick"/>
 	</div>
 </div>
@@ -240,6 +242,10 @@ onUnmounted(() => {
 .lower {
 	--height: 40px;
 	height: var(--height);
+
+	.tabs {
+		margin-right: auto;
+	}
 }
 
 .hideTitle {
@@ -380,6 +386,10 @@ onUnmounted(() => {
 	}
 }
 
+.lowerFriendly {
+	display: flex;
+}
+
 @container (max-width: 500px) {
   .followButton {
     margin: 0;