From 2e02e1b7548741d337edcb5b83b2e0970537d0b9 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 15 Oct 2024 13:33:33 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=99=98=EA=B2=BD=EC=97=90=EC=84=9C=20=EC=A0=9C=EC=96=B4?=
 =?UTF-8?q?=ED=8C=90=EC=9D=98=20=EC=9D=B8=EB=94=94=EC=BC=80=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=EA=B0=80=20=EC=9E=98=EB=AA=BB=EB=90=9C=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=EC=97=90=20=ED=91=9C=EC=8B=9C=EB=90=A0=20=EC=88=98=20?=
 =?UTF-8?q?=EC=9E=88=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../frontend/src/components/MkSuperMenu.vue   | 95 +++++++++++--------
 2 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index b7461c47d3..186d891aa2 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -58,6 +58,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2024xx](CHANGE
 - Fix: 노트 상세 페이지의 InstanceTicker에 커서를 올릴 때 마우스 포인터가 올바르게 표시되지 않음
 - Fix: `UI에 흐림 효과 사용` 옵션이 토스트 알림에서 제대로 적용되지 않음
   - 모바일 환경에서만 적용되던 문제를 해결했습니다.
+- Fix: 모바일 환경에서 제어판의 인디케이터가 잘못된 위치에 표시될 수 있음
 
 ---
 
diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 4be04a7405..7b40e9f38f 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -11,18 +11,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="items">
 			<template v-for="(item, i) in group.items">
 				<a v-if="item.type === 'a'" :href="item.href" :target="item.target" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</a>
 				<button v-else-if="item.type === 'button'" class="_button item" :class="{ danger: item.danger, active: item.active }" :disabled="item.active" @click="ev => item.action(ev)">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</button>
 				<MkA v-else :to="item.to" class="_button item" :class="{ danger: item.danger, active: item.active }">
-					<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
-					<span class="text">{{ item.text }}</span>
+					<span>
+						<span v-if="item.icon" class="icon"><i :class="item.icon" class="ti-fw"></i></span>
+						<span class="text">{{ item.text }}</span>
+					</span>
 					<span v-if="item.indicated" class="itemIndicator"><i class="_indicatorCircle"></i></span>
 				</MkA>
 			</template>
@@ -84,23 +90,28 @@ defineProps<{
 					color: var(--error);
 				}
 
-				> .icon {
-					width: 32px;
-					margin-right: 2px;
-					flex-shrink: 0;
-					text-align: center;
-					opacity: 0.8;
-				}
+				> span {
+					display: inherit;
+
+					> .icon {
+						width: 32px;
+						margin-right: 2px;
+						flex-shrink: 0;
+						text-align: center;
+						opacity: 0.8;
+					}
 
-				> .text {
-					white-space: normal;
-					padding-right: 12px;
-					flex-shrink: 1;
+					> .text {
+						white-space: normal;
+						padding-right: 12px;
+						flex-shrink: 1;
+					}
 				}
 
         > .itemIndicator {
-          position: absolute;
-          left: 1px;
+          position: relative;
+					top: -10px;
+          left: -72.5px;
           color: var(--navIndicator);
           font-size: 8px;
           animation: blink 1s infinite;
@@ -141,32 +152,40 @@ defineProps<{
 						background: none;
 						color: var(--accent);
 
-						> .icon {
-							background: var(--accentedBg);
+						> span {
+							> .icon {
+								background: var(--accentedBg);
+							}
 						}
 					}
 
-					> .icon {
-						display: grid;
-						place-content: center;
-						margin-right: 0;
-						margin-bottom: 6px;
-						font-size: 1.5em;
-						width: 60px;
-						height: 60px;
-						aspect-ratio: 1;
-						background: var(--panel);
-						border-radius: 100%;
-					}
+					> span {
+						display: initial;
 
-					> .text {
-						padding-right: 0;
-						width: 100%;
-						font-size: 0.8em;
+						> .icon {
+							display: grid;
+							place-content: center;
+							margin-right: 0;
+							margin-bottom: 6px;
+							font-size: 1.5em;
+							width: 60px;
+							height: 60px;
+							aspect-ratio: 1;
+							background: var(--panel);
+							border-radius: 100%;
+						}
+
+						> .text {
+							padding-right: 0;
+							width: 100%;
+							font-size: 0.8em;
+						}
 					}
 
           > .itemIndicator {
-            left: 15px;
+						display: flex;
+						top: -80px;
+            left: -22.5px;
             font-size: 0.8em;
           }
 				}