enhance(frontend): チャットページのデザイン改善

CHANGELOG_CHERRYPICK.md

@@ -39,6 +39,7 @@
 - 기본 다크 테마를 'Rosé Pine Moon'으로 변경
 - Enhance: '제어판 - 신고' 페이지의 버튼 가독성 향상
 - Enhance: '모달에 흐림 효과 사용' 옵션이 비활성화된 경우, 이미지를 탭하여 표시할 때 표시되는 배경을 어둡게 조정
+- Enhance: 대화 페이지 디자인 개선
 - Fix: (Friendly) 흐림 효과를 사용할 때 하단 내비게이션 바의 가독성이 매우 떨어지는 문제
 - Fix: (Friendly) 위젯 버튼에서 'UI 애니메이션 줄이기' 옵션이 적용되지 않는 문제
 - Fix: (Friendly) 스크롤을 해도 위젯 버튼이 숨겨지지 않는 문제

packages/frontend/src/pages/messaging/messaging-room.vue

@@ -5,15 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header>
-		<MkPageHeader/>
-	</template>
+	<template #header><MkPageHeader/></template>
 	<div
 		ref="rootEl"
 		:class="$style.root"
 		@dragover.prevent.stop="onDragover"
 		@drop.prevent.stop="onDrop"
 	>
+    <MkSpacer :contentMax="800">
       <div :class="$style.body">
         <MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
           <template #empty>
@@ -36,8 +35,10 @@ SPDX-License-Identifier: AGPL-3.0-only
           </template>
         </MkPagination>
       </div>
+    </MkSpacer>
 	</div>
 	<template #footer>
+    <div :class="$style.footerSpacer">
       <div :class="$style.footer">
         <div v-if="typers.length > 0" :class="$style.typers">
           <I18n :src="i18n.ts.typingUsers" textTag="span">
@@ -55,6 +56,7 @@ SPDX-License-Identifier: AGPL-3.0-only
           </div>
         </Transition>
         <XForm v-if="!fetching" ref="formEl" :user="user" :group="group" :class="$style.form"/>
+      </div>
     </div>
 	</template>
 </MkStickyContainer>
@@ -368,6 +370,10 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	}
 }
 
+.footerSpacer {
+  padding: 20px;
+}
+
 .footer {
 	width: 100%;
 	position: sticky;
@@ -415,14 +421,23 @@ definePageMetadata(computed(() => !fetching ? user ? {
 .form {
 	max-height: 12em;
 	overflow-y: scroll;
-	border-top: solid 0.5px var(--divider);
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
+	// border-top: solid 0.5px var(--divider);
+	// border-bottom-left-radius: 0;
+	// border-bottom-right-radius: 0;
+  border-radius: 15px;
 }
 
 @container (max-width: 500px) {
+  .footerSpacer {
+    padding: initial;
+  }
+
 	.footer {
 		margin-top: calc(50px + env(safe-area-inset-bottom));
 	}
+
+  .form {
+    border-radius: 0;
+  }
 }
 </style>