things

Co-authored-by: daph <d@waal.me>

packages/frontend/src/components/SkNote.vue

@@ -1198,4 +1198,31 @@ function emitUpdReaction(emoji: string, delta: number) {
 .clickToOpen {
 	cursor: pointer;
 }
+
+// thread line
+.avatarReplyTo::before {
+	position: absolute;
+	content: '';
+	width: 0px;
+	height: 28px;
+	left: 29px;
+	border-left: 2.5px solid rgb(174, 174, 174);
+	top: -28px;
+}
+
+@container (max-width: 580px) {
+	.avatarReplyTo::before {
+		height: 24px;
+		top: -24px;
+		left: 25px;
+	}
+}
+
+@container (max-width: 450px) {
+	.avatarReplyTo::before {
+		height: 22px;
+		top: -22px;
+		left: 23px;
+	}
+}
 </style>

packages/frontend/src/components/SkNoteDetailed.vue

@@ -768,7 +768,7 @@ function animatedMFM() {
 .renote {
 	display: flex;
 	align-items: center;
-	padding: 16px 32px 8px 32px;
+	padding: 16px 32px 8px 47px;
 	line-height: 28px;
 	white-space: pre;
 	color: var(--renote);
@@ -1080,13 +1080,47 @@ function animatedMFM() {
 	}
 }
 
+// thread line
 [class*="threadAncestor"] + .note .noteHeader::before {
 	position: absolute;
 	content: '';
 	width: 0px;
 	height: 32px;
-	left: 29px; // todo: adapt for container width
+	left: 29px;
-	border-left: 2.5px solid #0f0;
+	border-left: 2.5px solid rgb(174, 174, 174);
 	top: -32px;
 }
+
+@container (max-width: 580px) {
+	.renote {
+		padding-left: 37px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 19px;
+	}
+}
+@container (max-width: 500px) {
+	.renote {
+		padding-left: 36px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 18px;
+	}
+}
+@container (max-width: 480px) {
+	.renote {
+		padding-left: 35px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 17px;
+	}
+}
+@container (max-width: 450px) {
+	.renote {
+		padding-left: 33px;
+	}
+	[class*="threadAncestor"] + .note .noteHeader::before {
+		left: 31px;
+	}
+}
 </style>

packages/frontend/src/components/SkNoteSub.vue

@@ -562,10 +562,6 @@ if (props.detail) {
 	flex-grow: 1;
 	border-left: 2.5px solid rgb(174, 174, 174);
 	margin-left: 29px;
-
-	&.threadAncestorLine {
-		border-color: pink;
-	}
 }
 
 .reply {
@@ -603,16 +599,21 @@ if (props.detail) {
 	}
 }
 
-.threadAncestor {
+.threadAncestor + .threadAncestor::before,
-	&:not(:first-of-type)::before {
+[class*="renote"] + .threadAncestor::before {
-		position: absolute;
+	position: absolute;
-		content: '';
+	content: '';
-		width: 0px;
+	width: 0px;
-		height: 56px;
+	height: 56px;
-		left: 61px; // todo: adapt for container width
+	left: 61px;
-		border-left: 2.5px solid #f00;
+	border-left: 2.5px solid rgb(174, 174, 174);
-		top: -28px;
+	top: -28px;
-	}
+}
+
+// TODO FIX specificity issue
+[class*="renote"] + .threadAncestor::before {
+	height: 36px;
+	top: -8px;
 }
 
 @container (max-width: 580px) {
@@ -629,7 +630,18 @@ if (props.detail) {
 		margin-left: 0;
 	}
 }
-
+@container (max-width: 500px) {
+	[class*="renote"] + .threadAncestor::before {
+		height: 31px;
+		top: -8px;
+	}
+}
+@container (max-width: 480px) {
+	[class*="renote"] + .threadAncestor::before {
+		height: 0px;
+		top: -8px;
+	}
+}
 @container (max-width: 450px) {
 	.threadLine, .reply {
 		margin-left: 23px;
@@ -644,5 +656,34 @@ if (props.detail) {
 	.single {
 		margin-left: 0;
 	}
+	[class*="renote"] + .threadAncestor::before {
+		height: 22px;
+		top: 0;
+	}
+}
+
+@container (max-width: 580px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 51px;
+		height: 28px;
+		top: 0;
+	}
+}
+@container (max-width: 500px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 50px;
+		height: 46px;
+		top: -23px;
+	}
+}
+@container (max-width: 480px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 49px;
+	}
+}
+@container (max-width: 450px) {
+	.threadAncestor:not(:first-of-type)::before {
+		left: 47px;
+	}
 }
 </style>