enhance(client): チャットデザインの一部改善

CHANGELOG_CHERRYPICK.md

@@ -64,6 +64,7 @@
 - 특정 MFM 구문이 포함된 노트를 간략화 할지 선택할 수 있음(enhance: [aba0755](https://github.com/kokonect-link/cherrypick/commit/aba0755880d6797f49d34c8b7fe2c602d153e367))
 - 노트 사이를 띄우는 옵션 활성화 시 알림 페이지의 노트도 띄우도록
 - 안테나, 그룹, 리스트, 클립 페이지의 생성 버튼을 헤더로 이동
+- 채팅 디자인 일부 개선
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

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

@@ -74,8 +74,8 @@ function del(): void {
 		position: sticky;
 		top: calc(var(--stickyTop, 0px) + 16px);
 		display: block;
-		width: 54px;
-		height: 54px;
+		width: 48px;
+		height: 48px;
 		transition: all 0.1s ease;
 	}
 
@@ -148,7 +148,7 @@ function del(): void {
 				> .text {
 					display: block;
 					margin: 0;
-					padding: 12px 18px;
+					padding: 8px 12px;
 					overflow: hidden;
 					overflow-wrap: break-word;
 					word-break: break-word;
@@ -282,7 +282,6 @@ function del(): void {
 				}
 
 				> .content {
-
 					> p.is-deleted {
 						color: rgba(#fff, 0.5);
 					}
@@ -308,11 +307,6 @@ function del(): void {
 
 @container (max-width: 400px) {
 	.thvuemwp {
-		> .avatar {
-			width: 48px;
-			height: 48px;
-		}
-
 		> .content {
 			> .balloon {
 				> .content {
@@ -324,18 +318,4 @@ function del(): void {
 		}
 	}
 }
-
-@container (max-width: 500px) {
-	.thvuemwp {
-		> .content {
-			> .balloon {
-				> .content {
-					> .text {
-						padding: 8px 16px;
-					}
-				}
-			}
-		}
-	}
-}
 </style>