From f7904a240aab7b03f2bf60f20ab0380dbe7f749c Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 21 Jun 2023 23:25:16 +0200
Subject: [PATCH] client: fix MFM overflow

closes https://akkoma.dev/FoundKeyGang/FoundKey/issues/397

Changelog: Fixed
---
 packages/client/src/components/MkNoteSub.vue     | 1 +
 packages/client/src/components/note-detailed.vue | 3 +++
 packages/client/src/components/note.vue          | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index a023c19c2..83a575aa2 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -53,6 +53,7 @@ const replies: foundkey.entities.Note[] = props.conversation?.filter(item => ite
 .wrpstxzv {
 	padding: 16px 32px;
 	font-size: 0.9em;
+	overflow: clip;
 
 	&.max-width_450px {
 		padding: 14px 16px;
diff --git a/packages/client/src/components/note-detailed.vue b/packages/client/src/components/note-detailed.vue
index 152130f68..f5d73e3cb 100644
--- a/packages/client/src/components/note-detailed.vue
+++ b/packages/client/src/components/note-detailed.vue
@@ -390,6 +390,7 @@ if (appearNote.replyId) {
 	> .article {
 		padding: 32px;
 		font-size: 1.1em;
+		overflow: clip;
 
 		> .header {
 			display: flex;
@@ -450,6 +451,8 @@ if (appearNote.replyId) {
 				> .content {
 					> .text {
 						overflow-wrap: break-word;
+						position: relative;
+						z-index: -1;
 
 						> .reply {
 							color: var(--accent);
diff --git a/packages/client/src/components/note.vue b/packages/client/src/components/note.vue
index f87c17ea3..979d60e8f 100644
--- a/packages/client/src/components/note.vue
+++ b/packages/client/src/components/note.vue
@@ -403,6 +403,7 @@ function focusAfter() {
 	> .article {
 		display: flex;
 		padding: 28px 32px 18px;
+		overflow: clip;
 
 		> .avatar {
 			flex-shrink: 0;
@@ -483,6 +484,8 @@ function focusAfter() {
 
 					> .text {
 						overflow-wrap: break-word;
+						position: relative;
+						z-index: -1;
 
 						> .reply {
 							color: var(--accent);