fix: MFM overflowing out of note

Closes transfem-org/Sharkey#104
This commit is contained in:
Mar0xy 2023-10-22 22:48:49 +02:00
parent 6d290225ef
commit 13c5da63d7
No known key found for this signature in database
GPG key ID: 56569BBE47D2C828
5 changed files with 14 additions and 1 deletions

View file

@ -903,6 +903,7 @@ function readPromo() {
.text { .text {
overflow-wrap: break-word; overflow-wrap: break-word;
overflow: hidden;
} }
.replyIcon { .replyIcon {

View file

@ -760,6 +760,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.note { .note {
padding: 32px; padding: 32px;
font-size: 1.2em; font-size: 1.2em;
overflow: hidden;
&:hover > .main > .footer > .button { &:hover > .main > .footer > .button {
opacity: 1; opacity: 1;
@ -771,6 +772,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
position: relative; position: relative;
margin-bottom: 16px; margin-bottom: 16px;
align-items: center; align-items: center;
z-index: 2;
} }
.noteHeaderAvatar { .noteHeaderAvatar {
@ -817,6 +819,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
.noteContent { .noteContent {
container-type: inline-size; container-type: inline-size;
overflow-wrap: break-word; overflow-wrap: break-word;
z-index: 1;
} }
.cw { .cw {

View file

@ -69,6 +69,7 @@ watch(() => props.expandAllCws, (expandAllCws) => {
.header { .header {
margin-bottom: 2px; margin-bottom: 2px;
z-index: 2;
} }
.cw { .cw {
@ -77,12 +78,14 @@ watch(() => props.expandAllCws, (expandAllCws) => {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-wrap: break-word; overflow-wrap: break-word;
overflow: hidden;
} }
.text { .text {
cursor: default; cursor: default;
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow: hidden;
} }
@container (min-width: 250px) { @container (min-width: 250px) {

View file

@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkAvatar :class="$style.avatar" :user="note.user" link preview/> <MkAvatar :class="$style.avatar" :user="note.user" link preview/>
<div :class="$style.body"> <div :class="$style.body">
<MkNoteHeader :class="$style.header" :note="note" :mini="true"/> <MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
<div> <div :class="$style.content">
<p v-if="note.cw != null" :class="$style.cw"> <p v-if="note.cw != null" :class="$style.cw">
<Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/> <Mfm v-if="note.cw != ''" style="margin-right: 8px;" :text="note.cw" :author="note.user" :i="$i"/>
<MkCwButton v-model="showContent" :note="note"/> <MkCwButton v-model="showContent" :note="note"/>
@ -436,6 +436,10 @@ if (props.detail) {
min-width: 0; min-width: 0;
} }
.content {
overflow: hidden;
}
.header { .header {
margin-bottom: 2px; margin-bottom: 2px;
} }

View file

@ -164,6 +164,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
.note { .note {
padding: 32px; padding: 32px;
font-size: 1.2em; font-size: 1.2em;
overflow: hidden;
} }
.noteHeader { .noteHeader {
@ -171,6 +172,7 @@ const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultS
position: relative; position: relative;
margin-bottom: 16px; margin-bottom: 16px;
align-items: center; align-items: center;
z-index: 2;
} }
.noteHeaderAvatar { .noteHeaderAvatar {