From 94d2a16e8967e4ce60726afcba29fd9332e1db75 Mon Sep 17 00:00:00 2001
From: Insert5StarName <anime@shourai.de>
Date: Sun, 15 Oct 2023 18:58:27 +0200
Subject: [PATCH] fix: make note footer scale correctly

---
 packages/frontend/src/components/MkNote.vue         |  5 ++++-
 packages/frontend/src/components/MkNoteDetailed.vue | 12 ++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 98b067f55..c725dd05d 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -668,6 +668,9 @@ function readPromo() {
 	.footer {
 		position: relative;
 		z-index: 1;
+		margin-top: 0.4em;
+		width: max-content;
+		min-width: max-content;
 	}
 
 	&:hover > .article > .main > .footer > .footerButton {
@@ -939,7 +942,7 @@ function readPromo() {
 	opacity: 0.7;
 
 	&:not(:last-child) {
-		margin-right: 28px;
+		margin-right: 1.5em;
 	}
 
 	&:hover {
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index c6b0d7902..074b02160 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -92,7 +92,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<MkA v-if="appearNote.channel && !inChannel" :class="$style.channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television ph-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
 		</div>
-		<footer>
+		<footer :class="$style.footer">
 			<div :class="$style.noteFooterInfo">
 				<div v-if="appearNote.updatedAt">
 					{{ i18n.ts.edited }}: <MkTime :time="appearNote.updatedAt" mode="detail"/>
@@ -683,6 +683,14 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 	contain: content;
 }
 
+.footer {
+		position: relative;
+		z-index: 1;
+		margin-top: 0.4em;
+		width: max-content;
+		min-width: max-content;
+}
+
 .replyTo {
 	opacity: 0.7;
 	padding-bottom: 0;
@@ -855,7 +863,7 @@ if (appearNote.reply && appearNote.reply.replyId && defaultStore.state.autoloadC
 	opacity: 0.7;
 
 	&:not(:last-child) {
-		margin-right: 28px;
+		margin-right: 1.5em;
 	}
 
 	&:hover {