From c2a33082ae01180fef2186a25e570b331bda70a8 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 9 Nov 2022 13:21:13 -0800
Subject: [PATCH] MkSpacer for chat room

---
 package.json                                  |  2 +-
 .../src/pages/messaging/messaging-room.vue    | 73 ++++++++++---------
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index de78d387b..6944eca13 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.10.1",
+	"version": "12.119.0-calc.10.2",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 3b344b819..d3ce5886d 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -6,45 +6,46 @@
 	@drop.prevent.stop="onDrop"
 >
 	<div class="_content mk-messaging-room">
-		<div class="body">
-			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
-				<template #empty>
-					<div class="_fullinfo">
-						<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
-						<div>{{ i18n.ts.noMessagesYet }}</div>
-					</div>
-				</template>
-
-				<template #default="{ items: messages, fetching: pFetching }">
-					<XList
-						v-if="messages.length > 0"
-						v-slot="{ item: message }"
-						:class="{ messages: true, 'deny-move-transition': pFetching }"
-						:items="messages"
-						direction="up"
-						reversed
-					>
-						<XMessage :key="message.id" :message="message" :is-group="group != null"/>
-					</XList>
-				</template>
-			</MkPagination>
-		</div>
-		<footer>
-			<div v-if="typers.length > 0" class="typers">
-				<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
-					<template #users>
-						<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+		<MkSpacer :content-max="800">
+			<div class="body">
+				<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
+					<template #empty>
+						<div class="_fullinfo">
+							<img src="/static-assets/badges/info.png" class="_ghost" alt="Info"/>
+							<div>{{ i18n.ts.noMessagesYet }}</div>
+						</div>
 					</template>
-				</I18n>
-				<MkEllipsis/>
+					<template #default="{ items: messages, fetching: pFetching }">
+						<XList
+							v-if="messages.length > 0"
+							v-slot="{ item: message }"
+							:class="{ messages: true, 'deny-move-transition': pFetching }"
+							:items="messages"
+							direction="up"
+							reversed
+						>
+							<XMessage :key="message.id" :message="message" :is-group="group != null"/>
+						</XList>
+					</template>
+				</MkPagination>
 			</div>
-			<transition :name="animation ? 'fade' : ''">
-				<div v-show="showIndicator" class="new-message">
-					<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button>
+			<footer>
+				<div v-if="typers.length > 0" class="typers">
+					<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
+						<template #users>
+							<b v-for="typer in typers" :key="typer.id" class="user">{{ typer.username }}</b>
+						</template>
+					</I18n>
+					<MkEllipsis/>
 				</div>
-			</transition>
-			<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
-		</footer>
+				<transition :name="animation ? 'fade' : ''">
+					<div v-show="showIndicator" class="new-message">
+						<button class="_buttonPrimary" @click="onIndicatorClick"><i class="fas ph-fw ph-lg ph-arrow-circle-down-bold ph-lg"></i>{{ i18n.ts.newMessageExists }}</button>
+					</div>
+				</transition>
+				<XForm v-if="!fetching" ref="formEl" :user="user" :group="group" class="form"/>
+			</footer>
+		</MkSpacer>
 	</div>
 </div>
 </template>