diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 8663c5d3f0..28187b6396 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -29,7 +29,7 @@
 				</template>
 			</MkPagination>
 		</div>
-		<footer :class="{friendly: isFriendly }">
+		<footer :class="{ friendly: isFriendly, 'friendly-not-mobile': !isMobile }">
 			<div v-if="typers.length > 0" class="typers">
 				<I18n :src="i18n.ts.typingUsers" text-tag="span" class="users">
 					<template #users>
@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, nextTick, onBeforeUnmount } from 'vue';
+import { computed, watch, onMounted, nextTick, onBeforeUnmount, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as Acct from 'misskey-js/built/acct';
 import XMessage from './messaging-room.message.vue';
@@ -65,9 +65,16 @@ import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { defaultStore } from '@/store';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { deviceKind } from '@/scripts/device-kind';
 
 const isFriendly = $ref(localStorage.getItem('ui') === 'friendly');
 
+const MOBILE_THRESHOLD = 500;
+const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
+window.addEventListener('resize', () => {
+	isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD;
+});
+
 const props = defineProps<{
 	userAcct?: string;
 	groupId?: string;
@@ -348,6 +355,10 @@ definePageMetadata(computed(() => !fetching ? user ? {
 			bottom: calc(env(safe-area-inset-bottom, 0px) + 50px);
 		}
 
+		&.friendly-not-mobile {
+			bottom: 0;
+		}
+
 		> .new-message {
 			width: 100%;
 			padding-bottom: 8px;