fix(frontend): チャットに動画ファイルを送付すると、動画の表示が崩れてしまい視聴出来ない問題を修正

Fix #15854

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) {

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 {