From 460e7f05ab3de81f2d7f96612e0e8182ae135e42 Mon Sep 17 00:00:00 2001
From: Sugar <sugar@sylveon.social>
Date: Tue, 11 Jun 2024 17:24:45 +0200
Subject: [PATCH] correct collapsed in reply to line alignment with small
 screen sizes

---
 packages/frontend/src/components/SkNote.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index 1b1d8e49ec..236728c6ae 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -979,7 +979,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 
 .collapsedInReplyToLine {
 	position: absolute;
-	left: 56px;
+	left: calc(32px + .5 * var(--avatar));
 	// using solid instead of dotted, stylelistic choice
 	border-left: var(--thread-width) solid var(--thread);
 	top: calc(28px + 28px); // 28px of .root padding, plus 28px of avatar height (see SkNote)
@@ -1169,7 +1169,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: 47px;
+		left: calc(26px + .5 * var(--avatar));
 	}
 
 	.article {
@@ -1189,6 +1189,10 @@ function emitUpdReaction(emoji: string, delta: number) {
 	.footer {
 		margin-bottom: -8px;
 	}
+
+	.collapsedInReplyToLine {
+		left: calc(25px + .5 * var(--avatar));
+	}
 }
 
 @container (max-width: 500px) {
@@ -1224,7 +1228,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	.collapsedInReplyToLine {
-		left: 45px;
+		left: calc(24px + .5 * var(--avatar));
 	}
 
 	.article {