fix: MFM overflowing out of note

Closes transfem-org/Sharkey#104

packages/frontend/src/components/MkNote.vue

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

packages/frontend/src/components/MkNoteDetailed.vue

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

packages/frontend/src/components/MkNoteSimple.vue

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

packages/frontend/src/components/MkNoteSub.vue

@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkAvatar :class="$style.avatar" :user="note.user" link preview/>
 		<div :class="$style.body">
 			<MkNoteHeader :class="$style.header" :note="note" :mini="true"/>
-			<div>
+			<div :class="$style.content">
 				<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"/>
 					<MkCwButton v-model="showContent" :note="note"/>
@@ -436,6 +436,10 @@ if (props.detail) {
 	min-width: 0;
 }
 
+.content {
+	overflow: hidden;
+}
+
 .header {
 	margin-bottom: 2px;
 }

packages/frontend/src/components/SkOldNoteWindow.vue

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