message room style overhaul

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc-rc.3",
+	"version": "12.119.0-calc-rc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/pages/messaging/messaging-room.form.vue

@@ -234,15 +234,14 @@ defineExpose({
 
 <style lang="scss" scoped>
 .pemppnzi {
-	position: relative;
+	position: fixed;
 
 	> textarea {
 		cursor: auto;
 		display: block;
-		width: 100%;
-		min-width: 100%;
-		max-width: 100%;
-		min-height: 80px;
+		width: 80%;
+		min-width: 80%;
+		max-width: 80%;
 		margin: 0;
 		padding: 16px 16px 0 16px;
 		resize: none;

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

@@ -9,7 +9,7 @@
 			<div v-if="!message.isDeleted" class="content">
 				<Mfm v-if="message.text" ref="text" class="text" :text="message.text" :i="$i"/>
 				<div v-if="message.file" class="file">
-					<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name"/>
+					<img v-if="message.file.type.split('/')[0] == 'image'" :src="message.file.url" :alt="message.file.name" max-width="400"/>
 					<VuePlyr v-else-if="message.file.type.split('/')[0] == 'video'">
 						<video
 							:alt="message.file.name"
@@ -52,6 +52,7 @@
 import { } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
+import XImage from '@/components/MkMediaImage.vue';
 import VuePlyr from 'vue-plyr';
 import { extractUrlFromMfm } from '@/scripts/extract-url-from-mfm';
 import MkUrlPreview from '@/components/MkUrlPreview.vue';

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

@@ -296,6 +296,10 @@ definePageMetadata(computed(() => !fetching ? user ? {
 	position: relative;
 	overflow: auto;
 
+	XMessage:last-of-type {
+		margin-bottom: 4rem;
+	}
+
 	> .body {
 		.more {
 			display: block;