Fix: チャット入力欄の位置を固定

CHANGELOG_CHERRYPICK.md

@@ -70,6 +70,7 @@
 - Fix: 새 노트 알림이 프로필 아이콘을 밀어내는 문제
 - Fix: 리노트 알림에 프로필 아이콘이 뜨는 문제
 - Fix: 테마의 호환성이 저하되는 문제
+- Fix: 채팅 입력란의 위치를 고정하도록
 
 ---
 

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;
 		}
 	}
 

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>

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>