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: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=81=E3=83=A3=E3=83=83?=
 =?UTF-8?q?=E3=83=88=E3=81=AB=E5=8B=95=E7=94=BB=E3=83=95=E3=82=A1=E3=82=A4?=
 =?UTF-8?q?=E3=83=AB=E3=82=92=E9=80=81=E4=BB=98=E3=81=99=E3=82=8B=E3=81=A8?=
 =?UTF-8?q?=E3=80=81=E5=8B=95=E7=94=BB=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=81=8C?=
 =?UTF-8?q?=E5=B4=A9=E3=82=8C=E3=81=A6=E3=81=97=E3=81=BE=E3=81=84=E8=A6=96?=
 =?UTF-8?q?=E8=81=B4=E5=87=BA=E6=9D=A5=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a12d8af83f..4544e5acba 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -52,6 +52,7 @@
 - Enhance: シンタックスハイライトのエンジンをJavaScriptベースのものに変更
   - フロントエンドの読み込みサイズを軽量化しました
 	- ほとんどの言語のハイライトは問題なく行えますが、互換性の問題により一部の言語が正常にハイライトできなくなる可能性があります。詳しくは https://shiki.style/references/engine-js-compat をご覧ください。
+- Fix: チャットに動画ファイルを送付すると、動画の表示が崩れてしまい視聴出来ない問題を修正
 - Fix: "時計"ウィジェット(Clock)において、Transparent設定が有効でも、その背景が透過されない問題を修正
 - Fix: 一定時間操作がなかったら動画プレイヤーのコントロールを隠すように
 - Fix: Twitchのクリップがプレイヤーで再生できない問題を修正
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 {