From 419550a96d590be6d4816e80e69f17f506fa8284 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 13 Sep 2022 19:58:43 -0700
Subject: [PATCH] message room style overhaul

---
 package.json                                             | 2 +-
 .../client/src/pages/messaging/messaging-room.form.vue   | 9 ++++-----
 .../src/pages/messaging/messaging-room.message.vue       | 3 ++-
 packages/client/src/pages/messaging/messaging-room.vue   | 4 ++++
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 41e8d2d0a..23e96bc5b 100644
--- a/package.json
+++ b/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",
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index 096f07fb4..65b2b2275 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/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;
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 19e37cd94..2495d0798 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/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';
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index b3d2fe2a6..82c0eeb89 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/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;