diff options
Diffstat (limited to 'packages/frontend')
| -rw-r--r-- | packages/frontend/src/components/MkFukidashi.vue | 14 | ||||
| -rw-r--r-- | packages/frontend/src/pages/chat/XMessage.vue | 8 |
2 files changed, 19 insertions, 3 deletions
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 { |