🎨

packages/frontend/src/components/MkNote.vue

@@ -451,6 +451,7 @@ function showReactions(): void {
 			top: 12px;
 			right: 12px;
 			padding: 0 4px;
+			margin-bottom: 0 !important;
 			background: var(--popup);
 			border-radius: 6px;
 			box-shadow: 0px 4px 32px var(--shadow);
@@ -460,7 +461,7 @@ function showReactions(): void {
 			font-size: 80%;
 
 			&:not(:last-child) {
-				margin-right: 6px;
+				margin-right: 0;
 			}
 		}
 	}
@@ -568,14 +569,15 @@ function showReactions(): void {
 }
 
 .article {
+	position: relative;
 	display: flex;
-	padding: 28px 32px 18px;
+	padding: 28px 32px;
 }
 
 .avatar {
 	flex-shrink: 0;
 	display: block !important;
-	margin: 0 14px 8px 0;
+	margin: 0 14px 0 0;
 	width: 58px;
 	height: 58px;
 	position: sticky !important;
@@ -680,6 +682,10 @@ function showReactions(): void {
 	font-size: 80%;
 }
 
+.footer {
+	margin-bottom: -14px;
+}
+
 .footerButton {
 	margin: 0;
 	padding: 8px;
@@ -710,7 +716,7 @@ function showReactions(): void {
 	}
 
 	.article {
-		padding: 24px 26px 14px;
+		padding: 24px 26px;
 	}
 
 	.avatar {
@@ -729,7 +735,11 @@ function showReactions(): void {
 	}
 
 	.article {
-		padding: 20px 22px 12px;
+		padding: 20px 22px;
+	}
+
+	.footer {
+		margin-bottom: -8px;
 	}
 }
 
@@ -748,13 +758,13 @@ function showReactions(): void {
 	}
 
 	.article {
-		padding: 14px 16px 9px;
+		padding: 14px 16px;
 	}
 }
 
 @container (max-width: 450px) {
 	.avatar {
-		margin: 0 10px 8px 0;
+		margin: 0 10px 0 0;
 		width: 46px;
 		height: 46px;
 		top: calc(14px + var(--stickyTop, 0px));
@@ -762,20 +772,24 @@ function showReactions(): void {
 }
 
 @container (max-width: 400px) {
+	.root:not(.showActionsOnlyHover) {
 		.footerButton {
 			&:not(:last-child) {
 				margin-right: 18px;
 			}
 		}
 	}
+}
 
 @container (max-width: 350px) {
+	.root:not(.showActionsOnlyHover) {
 		.footerButton {
 			&:not(:last-child) {
 				margin-right: 12px;
 			}
 		}
 	}
+}
 
 @container (max-width: 300px) {
 	.avatar {
@@ -783,12 +797,14 @@ function showReactions(): void {
 		height: 44px;
 	}
 
+	.root:not(.showActionsOnlyHover) {
 		.footerButton {
 			&:not(:last-child) {
 				margin-right: 8px;
 			}
 		}
 	}
+}
 
 @container (max-width: 250px) {
 	.quoteNote {