From 85d339ee913503ec4833e3249d834790867fd2b7 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Thu, 29 May 2025 17:44:30 +0900
Subject: fix(frontend):
 チャットに動画ファイルを送付すると、動画の表示が崩れてしまい視聴出来ない問題を修正
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix #15854
---
 packages/frontend/src/components/MkFukidashi.vue | 14 +++++++++++++-
 packages/frontend/src/pages/chat/XMessage.vue    |  8 ++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'packages/frontend/src')

diff --git a/packages/frontend/src/components/MkFukidashi.vue b/packages/frontend/src/components/MkFukidashi.vue
index fba5dc854c..fc3de2845e 100644
--- a/packages/frontend/src/components/MkFukidashi.vue
+++ b/packages/frontend/src/components/MkFukidashi.vue
@@ -10,7 +10,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 		tail === 'left' ? $style.left : $style.right,
 		negativeMargin === true && $style.negativeMargin,
 		shadow === true && $style.shadow,
-		accented === true && $style.accented
+		accented === true && $style.accented,
+		fullWidth === true && $style.fullWidth,
 	]"
 >
 	<div :class="$style.bg">
@@ -32,11 +33,13 @@ withDefaults(defineProps<{
 	negativeMargin?: boolean;
 	shadow?: boolean;
 	accented?: boolean;
+	fullWidth?: boolean;
 }>(), {
 	tail: 'right',
 	negativeMargin: false,
 	shadow: false,
 	accented: false,
+	fullWidth: false,
 });
 </script>
 
@@ -73,6 +76,14 @@ withDefaults(defineProps<{
 			margin-right: calc(calc(var(--fukidashi-radius) * .13) * -1);
 		}
 	}
+
+	&.fullWidth {
+		width: 100%;
+
+		&.content {
+			width: 100%;
+		}
+	}
 }
 
 .bg {
@@ -85,6 +96,7 @@ withDefaults(defineProps<{
 .content {
 	position: relative;
 	padding: 10px 14px;
+	box-sizing: border-box;
 }
 
 @container (max-width: 450px) {
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index def6ec7d14..95f6d870dc 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -6,9 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
 	<MkAvatar :class="$style.avatar" :user="message.fromUser!" :link="!isMe" :preview="false"/>
-	<div :class="$style.body" @contextmenu.stop="onContextmenu">
+	<div :class="[$style.body, message.file != null ? $style.fullWidth : null]" @contextmenu.stop="onContextmenu">
 		<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName'] && message.fromUser != null" :user="message.fromUser"/></div>
-		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
+		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :fullWidth="message.file != null" :accented="isMe">
 			<Mfm
 				v-if="message.text"
 				ref="text"
@@ -259,6 +259,10 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 
 .body {
 	margin: 0 12px;
+
+	&.fullWidth {
+		width: 100%;
+	}
 }
 
 .header {
-- 
cgit v1.3.1-freya