From 2eba25f1e7d60285577990e3f923248cdfdee2f1 Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Fri, 2 Jun 2023 23:17:07 +0900
Subject: [PATCH] =?UTF-8?q?Fix:=20=E3=83=81=E3=83=A3=E3=83=83=E3=83=88?=
 =?UTF-8?q?=E5=85=A5=E5=8A=9B=E6=AC=84=E3=81=AE=E4=BD=8D=E7=BD=AE=E3=82=92?=
 =?UTF-8?q?=E5=9B=BA=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG_CHERRYPICK.md                       |  1 +
 .../frontend/src/pages/messaging/index.vue    |  7 ++---
 .../src/pages/messaging/messaging-room.vue    | 31 ++++++++++++-------
 packages/frontend/src/ui/friendly.vue         |  2 +-
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/CHANGELOG_CHERRYPICK.md b/CHANGELOG_CHERRYPICK.md
index 5caa9167d7..93de8e41b4 100644
--- a/CHANGELOG_CHERRYPICK.md
+++ b/CHANGELOG_CHERRYPICK.md
@@ -70,6 +70,7 @@
 - Fix: 새 노트 알림이 프로필 아이콘을 밀어내는 문제
 - Fix: 리노트 알림에 프로필 아이콘이 뜨는 문제
 - Fix: 테마의 호환성이 저하되는 문제
+- Fix: 채팅 입력란의 위치를 고정하도록
 
 ---
 
diff --git a/packages/frontend/src/pages/messaging/index.vue b/packages/frontend/src/pages/messaging/index.vue
index 5c3a2d1f48..0ce50a95de 100644
--- a/packages/frontend/src/pages/messaging/index.vue
+++ b/packages/frontend/src/pages/messaging/index.vue
@@ -26,7 +26,7 @@
 							<MkTime :time="message.createdAt" :class="$style.time"/>
 						</header>
 						<div>
-							<p :class="$style.text"><span v-if="isMe(message)" :class="$style.me">{{ i18n.ts.you }}:</span>{{ message.text }}</p>
+							<p :class="$style.text"><span v-if="isMe(message)" :class="$style.me">{{ i18n.ts.you }}: </span>{{ message.text }}</p>
 						</div>
 					</div>
 				</MkA>
@@ -264,11 +264,10 @@ definePageMetadata({
 	max-height: 512px;
 }
 
-@container (max-width: 400px) {
+@container (max-width: 500px) {
 	.message {
 		> div {
-			padding: 16px;
-			font-size: 0.9em;
+			font-size: .9em;
 		}
 	}
 
diff --git a/packages/frontend/src/pages/messaging/messaging-room.vue b/packages/frontend/src/pages/messaging/messaging-room.vue
index 5a7ad0db26..c9afa6da8c 100644
--- a/packages/frontend/src/pages/messaging/messaging-room.vue
+++ b/packages/frontend/src/pages/messaging/messaging-room.vue
@@ -31,7 +31,9 @@
 				</template>
 			</MkPagination>
 		</div>
-		<footer :class="$style.footer">
+	</div>
+	<template #footer>
+		<div :class="$style.footer">
 			<div v-if="typers.length > 0" :class="$style.typers">
 				<I18n :src="i18n.ts.typingUsers" textTag="span">
 					<template #users>
@@ -48,8 +50,8 @@
 				</div>
 			</Transition>
 			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
-		</footer>
-	</div>
+		</div>
+	</template>
 </MkStickyContainer>
 </template>
 
@@ -314,12 +316,21 @@ definePageMetadata(computed(() => !fetching ? user ? {
 </script>
 
 <style lang="scss" module>
+.fade-enter-active, .fade-leave-active {
+	transition: opacity 0.1s;
+}
+
+.fade-enter-from, .fade-leave-to {
+	transition: opacity 0.5s;
+	opacity: 0;
+}
+
 .root {
 	display: contents;
 }
 
 .body {
-	min-height: 80%;
+	min-height: 80dvh;
 }
 
 .more {
@@ -361,7 +372,6 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	position: sticky;
 	z-index: 2;
 	padding-top: 8px;
-	bottom: var(--minBottomSpacing);
 }
 
 .newMessage {
@@ -409,12 +419,9 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	border-bottom-right-radius: 0;
 }
 
-.fade-enter-active, .fade-leave-active {
-	transition: opacity 0.1s;
-}
-
-.fade-enter-from, .fade-leave-to {
-	transition: opacity 0.5s;
-	opacity: 0;
+@container (max-width: 500px) {
+	.footer {
+		margin-top: 50px;
+	}
 }
 </style>
diff --git a/packages/frontend/src/ui/friendly.vue b/packages/frontend/src/ui/friendly.vue
index f59fe45f22..3aa2909223 100644
--- a/packages/frontend/src/ui/friendly.vue
+++ b/packages/frontend/src/ui/friendly.vue
@@ -23,7 +23,7 @@
 
 	<button v-if="!isDesktop && !isMobile" :class="[$style.widgetButton, {[$style.showEl]: showEl }]" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
 
-	<div v-if="isMobile" :class="$style.nav">
+	<div v-if="isMobile" ref="navFooter" :class="$style.nav">
 		<!-- <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button> -->
 		<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'index' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.replace('/')" @touchstart="openAccountMenu" @touchend="closeAccountMenu"><i :class="$style.navButtonIcon" class="ti ti-home"></i><span v-if="queue > 0" :class="$style.navButtonIndicatorHome"><i class="_indicatorCircle"></i></span></button>
 		<button :class="[$style.navButton, { [$style.active]: mainRouter.currentRoute.value.name === 'explore' }]" class="_button" @click="mainRouter.currentRoute.value.name === 'explore' ? top() : mainRouter.replace('/explore')"><i :class="$style.navButtonIcon" class="ti ti-hash"></i></button>