merge: fix thread line misalignment on smaller viewports (#308)

Fixes #307

1 files changed, 26 insertions, 15 deletions

diff --git a/packages/frontend/src/components/SkNote.vue b/packages/frontend/src/components/SkNote.vue
index b5b23386e7..93578da03f 100644
--- a/packages/frontend/src/components/SkNote.vue
+++ b/packages/frontend/src/components/SkNote.vue
@@ -1161,24 +1161,24 @@ defineExpose({
 @container (max-width: 580px) {
 	.root {
 		font-size: 0.95em;
+		--avatar: 46px;
 	}
 
 	.renote {
-		padding: 24px 28px 16px;
+		padding: 24px 26px 0 calc(26px + var(--avatar) + 14px);
+
+		&::before {
+			left: calc(26px + .5 * var(--avatar));
+		}
 	}
 
 	.collapsedRenoteTarget {
-		padding: 8px 28px 24px;
+		padding: 8px 26px 24px;
 	}
 
 	.article {
 		padding: 24px 26px;
 	}
-
-	.avatar {
-		width: 50px;
-		height: 50px;
-	}
 }
 
 @container (max-width: 500px) {
@@ -1195,9 +1195,23 @@ defineExpose({
 	}
 }
 
+@container (max-width: 500px) {
+	.renote {
+		padding: 23px 25px 0 calc(25px + var(--avatar) + 14px);
+
+		&::before {
+			left: calc(25px + .5 * var(--avatar));
+		}
+	}
+}
+
 @container (max-width: 480px) {
 	.renote {
-		padding: 20px 24px 8px;
+		padding: 22px 24px 0 calc(24px + var(--avatar) + 14px);
+
+		&::before {
+			left: calc(24px + .5 * var(--avatar));
+		}
 	}
 
 	.tip {
@@ -1215,10 +1229,12 @@ defineExpose({
 }
 
 @container (max-width: 450px) {
+	.root {
+		--avatar: 44px;
+	}
+
 	.avatar {
 		margin: 0 10px 0 0;
-		width: 46px;
-		height: 46px;
 		top: calc(14px + var(--stickyTop, 0px));
 	}
 }
@@ -1251,11 +1267,6 @@ defineExpose({
 }
 
 @container (max-width: 300px) {
-	.avatar {
-		width: 44px;
-		height: 44px;
-	}
-
 	.root:not(.showActionsOnlyHover) {
 		.footerButton {
 			&:not(:last-child) {