:art:

3 files changed, 32 insertions, 16 deletions

diff --git a/src/client/components/page-window.vue b/src/client/components/page-window.vue
index 77312fec7f..4a605bde69 100644
--- a/src/client/components/page-window.vue
+++ b/src/client/components/page-window.vue
@@ -1,5 +1,5 @@
 <template>
-<XWindow ref="window" :initial-width="400" :initial-height="450" :can-resize="true" @closed="$emit('closed')">
+<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
 	<template #header>
 		<XHeader :info="pageInfo" :with-back="false"/>
 	</template>
diff --git a/src/client/pages/messaging/messaging-room.message.vue b/src/client/pages/messaging/messaging-room.message.vue
index 37fc6ba319..33ad371ebb 100644
--- a/src/client/pages/messaging/messaging-room.message.vue
+++ b/src/client/pages/messaging/messaging-room.message.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="thvuemwp" :class="{ isMe }">
+<div class="thvuemwp" :class="{ isMe }" v-size="{ max: [400, 500] }">
 	<MkAvatar class="avatar" :user="message.user"/>
 	<div class="content">
 		<div class="balloon" :class="{ noText: message.text == null }" >
@@ -92,11 +92,6 @@ export default defineComponent({
 		width: 54px;
 		height: 54px;
 		transition: all 0.1s ease;
-
-		@media (max-width: 400px) {
-			width: 48px;
-			height: 48px;
-		}
 	}
 
 	> .content {
@@ -175,14 +170,6 @@ export default defineComponent({
 					font-size: 1em;
 					color: rgba(#000, 0.8);
 
-					@media (max-width: 500px) {
-						padding: 8px 16px;
-					}
-
-					@media (max-width: 400px) {
-						font-size: 0.9em;
-					}
-
 					& + .file {
 						> a {
 							border-radius: 0 0 16px 16px;
@@ -326,5 +313,34 @@ export default defineComponent({
 			}
 		}
 	}
+
+	&.max-width_400px {
+		> .avatar {
+			width: 48px;
+			height: 48px;
+		}
+
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						font-size: 0.9em;
+					}
+				}
+			}
+		}
+	}
+
+	&.max-width_500px {
+		> .content {
+			> .balloon {
+				> .content {
+					> .text {
+						padding: 8px 16px;
+					}
+				}
+			}
+		}
+	}
 }
 </style>
diff --git a/src/client/scripts/popout.ts b/src/client/scripts/popout.ts
index f3611390c6..51b8d72868 100644
--- a/src/client/scripts/popout.ts
+++ b/src/client/scripts/popout.ts
@@ -13,7 +13,7 @@ export function popout(path: string, w?: HTMLElement) {
 			`width=${width}, height=${height}, top=${y}, left=${x}`);
 	} else {
 		const width = 400;
-		const height = 450;
+		const height = 500;
 		const x = window.top.outerHeight / 2 + window.top.screenY - (height / 2);
 		const y = window.top.outerWidth / 2 + window.top.screenX - (width / 2);
 		window.open(url, url,