From a485fa3e829a5282d2b84c967d44aea54d58df11 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 27 Oct 2023 17:47:50 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=EB=84=A4=EB=B9=84=EA=B2=8C?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EB=A9=94=EB=89=B4=EC=9D=98=20=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=ED=94=84=EB=A1=9C=ED=95=84=20=EC=98=81=EC=97=AD?=
 =?UTF-8?q?=EC=9D=B4=20=EC=9E=98=EB=AA=BB=EB=90=9C=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=EC=9C=BC=EB=A1=9C=20=ED=91=9C=EC=8B=9C=EB=90=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../src/ui/_common_/navbar-for-mobile.vue     | 19 +++++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 88f63cbd90..f8fb260481 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -49,6 +49,7 @@ Misskey의 전체 변경 사항을 확인하려면, [CHANGELOG.md#2023xx](CHANGE
   - 특정 조건에서 헤더의 왼쪽에 여백이 발생할 수 있음
   - 일부 페이지에서 잘못된 디자인이 표시됨
   - 일부 페이지에서 액션 항목이 존재해도 버튼이 표시되지 않을 수 있음
+- Fix: 네비게이션 메뉴의 하단 프로필 영역이 잘못된 디자인으로 표시됨
 
 ### Server
 - Feat: 연합에서 노트 수정이 반영됨 (libnare/cp-castella#1)
diff --git a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
index a6f12ef1e0..9dac67cbd1 100644
--- a/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
+++ b/packages/frontend/src/ui/_common_/navbar-for-mobile.vue
@@ -44,9 +44,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
 			<i :class="[$style.postIcon, defaultStore.state.renameTheButtonInPostFormToNya ? 'ti-paw-filled' : 'ti-pencil']" class="ti ti-fw"></i><span style="position: relative;">{{ defaultStore.state.renameTheButtonInPostFormToNya ? i18n.ts.nya : i18n.ts.note }}</span>
 		</button>
-		<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.account" @click="openAccountMenu">
-			<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
-		</button>
+		<div :class="$style.profile">
+			<button v-vibrate="ColdDeviceStorage.get('vibrateSystem') ? 5 : ''" class="_button" :class="$style.account" @click="openAccountMenu">
+				<MkAvatar :user="$i" :class="$style.avatar"/><MkAcct :class="$style.acct" class="_nowrap" :user="$i"/>
+			</button>
+		</div>
 	</div>
 </div>
 </template>
@@ -108,6 +110,7 @@ function more() {
 .root {
 	display: flex;
 	flex-direction: column;
+	height: 100%;
 }
 
 .top {
@@ -159,7 +162,7 @@ function more() {
 .bottom {
 	position: sticky;
 	bottom: 0;
-	padding: 20px 0;
+	padding: 20px 0 calc(env(safe-area-inset-bottom) + 25px);
 	background: var(--X14);
 	-webkit-backdrop-filter: var(--blur, blur(8px));
 	backdrop-filter: var(--blur, blur(8px));
@@ -204,6 +207,11 @@ function more() {
 	width: 32px;
 }
 
+.profile {
+	display: flex;
+	margin-top: 16px;
+}
+
 .account {
 	position: relative;
 	display: flex;
@@ -213,7 +221,6 @@ function more() {
 	width: 100%;
 	text-align: left;
 	box-sizing: border-box;
-	margin-top: 16px;
 }
 
 .avatar {
@@ -293,7 +300,7 @@ function more() {
 	top: 0;
 	left: 20px;
 	color: var(--navIndicator);
-	font-size: 8px;
+	font-size: 6px;
 	animation: blink 1s infinite;
 
 	&:has(.itemIndicateValueIcon) {