From 7a1ff881f0d307c3ee99ef51720faa80681b026b Mon Sep 17 00:00:00 2001
From: NoriDev <m1nthing2322@gmail.com>
Date: Tue, 6 Sep 2022 16:37:39 +0900
Subject: [PATCH] fix(friendly): Chat field partially obscured when scrolling

---
 .../src/pages/messaging/messaging-room.vue    | 20 ++++++++++++++-----
 packages/client/src/ui/friendly.vue           |  2 +-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index f9997d3c52..8663c5d3f0 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -5,7 +5,7 @@
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
-	<div class="_content mk-messaging-room">
+	<div class="_content mk-messaging-room" :class="{ friendly: isFriendly }">
 		<div class="body">
 			<MkPagination v-if="pagination" ref="pagingComponent" :key="userAcct || groupId" :pagination="pagination">
 				<template #empty>
@@ -29,7 +29,7 @@
 				</template>
 			</MkPagination>
 		</div>
-		<footer>
+		<footer :class="{friendly: isFriendly }">
 			<div v-if="typers.length > 0" class="typers">
 				<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
 					<template #users>
@@ -66,6 +66,8 @@ import { $i } from '@/account';
 import { defaultStore } from '@/store';
 import { definePageMetadata } from '@/scripts/page-metadata';
 
+const isFriendly = $ref(localStorage.getItem('ui') === 'friendly');
+
 const props = defineProps<{
 	userAcct?: string;
 	groupId?: string;
@@ -292,7 +294,11 @@ definePageMetadata(computed(() => !fetching ? user ? {
 <style lang="scss" scoped>
 .mk-messaging-room {
 	position: relative;
-	// overflow: auto;
+	overflow: auto;
+
+	&.friendly {
+		overflow: initial;
+	}
 
 	> .body {
 		.more {
@@ -334,9 +340,13 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		width: 100%;
 		position: sticky;
 		z-index: 2;
-		bottom: 0;
 		padding-top: 8px;
-		// bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
+
+		&.friendly {
+			padding-top: 64px;
+			bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);
+		}
 
 		> .new-message {
 			width: 100%;
diff --git a/packages/client/src/ui/friendly.vue b/packages/client/src/ui/friendly.vue
index 6d4d7f1eeb..0be35a1938 100644
--- a/packages/client/src/ui/friendly.vue
+++ b/packages/client/src/ui/friendly.vue
@@ -8,7 +8,7 @@
 			<div :class="$style.content">
 				<RouterView/>
 			</div>
-			<div :class="$style.spacer"></div>
+			<div v-if="!(mainRouter.currentRoute.value.name === 'messaging-room' || mainRouter.currentRoute.value.name === 'messaging-room-group')" :class="$style.spacer"></div>
 		</main>
 	</MkStickyContainer>