fix(frontend): 노트 상세 페이지에서 역할 아이콘에 문제가 발생할 수 있음

- 중복으로 표시될 수 있음
  - 아이콘이 제대로 표시되지 않을 수 있음

CHANGELOG_CHERRYPICK.md

@@ -23,6 +23,18 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 # 릴리스 노트
 이 문서는 CherryPick의 변경 사항만 포함합니다.
 
+## 4.x.x
+출시일: unreleased<br>
+기반 Misskey 버전: 2024.x.x<br>
+Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGELOG.md#2024xx) 문서를 참고하십시오.
+
+### Client
+- Fix: 노트 상세 페이지에서 역할 아이콘에 문제가 발생할 수 있음
+  - 중복으로 표시될 수 있음
+  - 아이콘이 제대로 표시되지 않을 수 있음
+
+---
+
 ## 4.14.1
 출시일: 2025/1/2<br>
 기반 Misskey 버전: 2024.11.1-alpha.0<br>

packages/frontend/src/components/MkNoteDetailed.vue

@@ -86,16 +86,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</div>
 					<MkInstanceTicker v-if="showTicker" :instance="appearNote.user.instance" @click="showOnRemote"/>
 				</div>
+				<!--
 				<div :class="$style.noteHeaderUsernameAndBadgeRoles">
-					<!--
 					<div :class="$style.noteHeaderUsername">
 						<MkAcct :user="appearNote.user"/>
 					</div>
-					-->
 					<div v-if="appearNote.user.badgeRoles" :class="$style.noteHeaderBadgeRoles">
 						<img v-for="(role, i) in appearNote.user.badgeRoles" :key="i" v-tooltip="role.name" :class="$style.noteHeaderBadgeRole" :src="role.iconUrl!"/>
 					</div>
 				</div>
+				-->
 			</div>
 		</header>
 		<div :class="$style.noteContent">
@@ -926,6 +926,7 @@ function showOnRemote() {
 }
 
 .noteHeaderName {
+	display: flex;
 	font-weight: bold;
 	line-height: 1.3;
 	margin: 0 .5em 0 0;