From 8b4be8cad1d207be7226e510b46e5c6041dcbd0c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 11 Jul 2022 13:45:00 -0700
Subject: [PATCH 1/2] Fix broken chats

Co-authored-by: @ltlapy
---
 .../client/src/components/ui/pagination.vue   | 30 ++++++++++---------
 .../src/pages/messaging/messaging-room.vue    |  3 +-
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index a03c2b3a1..4544dfc43 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -196,21 +196,23 @@ const prepend = (item: Item): void => {
 	if (props.pagination.reversed) {
 		if (rootEl.value) {
 			const container = getScrollContainer(rootEl.value);
-			if (container == null) return; // TODO?
-
-			const pos = getScrollPosition(rootEl.value);
-			const viewHeight = container.clientHeight;
-			const height = container.scrollHeight;
-			const isBottom = (pos + viewHeight > height - 32);
-			if (isBottom) {
-				// オーバーフローしたら古いアイテムは捨てる
-				if (items.value.length >= props.displayLimit) {
-					// このやり方だとVue 3.2以降アニメーションが動かなくなる
-					//items.value = items.value.slice(-props.displayLimit);
-					while (items.value.length >= props.displayLimit) {
-						items.value.shift();
+			if (container == null) {
+				// TODO?
+			} else {
+				const pos = getScrollPosition(rootEl.value);
+				const viewHeight = container.clientHeight;
+				const height = container.scrollHeight;
+				const isBottom = (pos + viewHeight > height - 32);
+				if (isBottom) {
+					// オーバーフローしたら古いアイテムは捨てる
+					if (items.value.length >= props.displayLimit) {
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
+						//items.value = items.value.slice(-props.displayLimit);
+						while (items.value.length >= props.displayLimit) {
+							items.value.shift();
+						}
+						more.value = true;
 					}
-					more.value = true;
 				}
 			}
 		}
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 2e00c3ab1..f38acb5ef 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -292,6 +292,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 <style lang="scss" scoped>
 .mk-messaging-room {
 	position: relative;
+	overflow: auto;
 
 	> .body {
 		.more {
@@ -337,7 +338,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		padding-top: 8px;
 
 		@media (max-width: 500px) {
-			bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
+			bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
 		}
 
 		> .new-message {

From 6f09e14225712f841534ed0f100652b07b649879 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com>
Date: Mon, 11 Jul 2022 15:00:48 -0700
Subject: [PATCH 2/2] :art:

---
 packages/client/src/pages/messaging/messaging-room.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index f38acb5ef..fe1590b24 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -336,10 +336,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		z-index: 2;
 		bottom: 0;
 		padding-top: 8px;
-
-		@media (max-width: 500px) {
-			bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
-		}
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
 
 		> .new-message {
 			width: 100%;