upd: make avatars smaller on replies to allow more space for text

i'm unsure about the batch of @container blocks at the end of the CSS,
they seem like leftovers from a previous implementation. removing them
didn't seem to change anything but i may be overlooking something.

1 files changed, 11 insertions, 39 deletions

diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 363dcef348..164f4e883a 100644
--- a/packages/frontend/src/components/SkNoteSub.vue
+++ b/packages/frontend/src/components/SkNoteSub.vue
@@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1 }]">
+<div v-show="!isDeleted" v-if="!muted" ref="el" :class="[$style.root, { [$style.children]: depth > 1, [$style.replyRoot]: props.reply }]">
 	<div v-if="!hideLine" :class="$style.line"></div>
 	<div :class="$style.main">
 		<div v-if="note.channel" :class="$style.colorBar" :style="{ background: note.channel.color }"></div>
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 	</div>
 	<template v-if="depth < numberOfReplies">
-		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+		<SkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" :class="[$style.reply, { [$style.single]: replies.length === 1 }]" :detail="true" :depth="depth + 1" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :reply="props.reply"/>
 	</template>
 	<div v-else :class="$style.more">
 		<MkA class="_link" :to="notePage(note)">{{ i18n.ts.continueThread }} <i class="ph-caret-double-right ph-bold ph-lg"></i></MkA>
@@ -125,8 +125,11 @@ const props = withDefaults(defineProps<{
 
 	// how many notes are in between this one and the note being viewed in detail
 	depth?: number;
+
+	reply?: boolean;
 }>(), {
 	depth: 1,
+	reply: false,
 });
 
 const el = shallowRef<HTMLElement>();
@@ -439,7 +442,11 @@ if (props.detail) {
 	--reply-indent: calc(.5 * var(--avatar));
 
 	&.children {
-		padding: 10px 0 0 16px;
+		padding: 10px 0 0 8px;
+	}
+
+	&.replyRoot {
+		--avatar: 36px;
 	}
 }
 
@@ -478,7 +485,7 @@ if (props.detail) {
 		transition: opacity .2s, background .2s;
 		z-index: -1;
 	}
-	
+
 	&:hover::after,
 	&:focus-within::after {
 		opacity: 1;
@@ -610,10 +617,6 @@ if (props.detail) {
 @container (max-width: 480px) {
 	.root {
 		padding: 22px 24px;
-
-		&.children {
-			padding: 10px 0 0 8px;
-		}
 	}
 
 	.line {
@@ -683,35 +686,4 @@ if (props.detail) {
 		border-bottom: unset;
 	}
 }
-
-@container (max-width: 580px) {
-	.threadLine, .reply {
-		margin-left: 25px;
-	}
-	.reply::before {
-		height: 45px;
-	}
-	.single::before {
-		left: 25px;
-	}
-	.single {
-		margin-left: 0;
-	}
-}
-
-@container (max-width: 450px) {
-	.threadLine, .reply {
-		margin-left: 23px;
-	}
-	.reply::before {
-		height: 43px;
-	}
-	.single::before {
-		left: 23px;
-		width: 9px;
-	}
-	.single {
-		margin-left: 0;
-	}
-}
 </style>