From 1bc2da2bda00c802efd85421f51884a075e059e5 Mon Sep 17 00:00:00 2001
From: ShittyKopper <shittykopper@w.on-t.work>
Date: Sun, 28 Jan 2024 18:20:59 +0300
Subject: [PATCH] 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.
---
 .../src/components/SkNoteDetailed.vue         |  4 +-
 .../frontend/src/components/SkNoteSub.vue     | 50 ++++---------------
 2 files changed, 13 insertions(+), 41 deletions(-)

diff --git a/packages/frontend/src/components/SkNoteDetailed.vue b/packages/frontend/src/components/SkNoteDetailed.vue
index 0681ddc6c..cf54d9d50 100644
--- a/packages/frontend/src/components/SkNoteDetailed.vue
+++ b/packages/frontend/src/components/SkNoteDetailed.vue
@@ -178,7 +178,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!repliesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadReplies">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply"/>
+			<SkNoteSub v-for="note in replies" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :onDeleteCallback="removeReply" :reply="true"/>
 		</div>
 		<div v-else-if="tab === 'renotes'" :class="$style.tab_renotes">
 			<MkPagination :pagination="renotesPagination" :disableAutoLoad="true">
@@ -195,7 +195,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-if="!quotesLoaded" style="padding: 16px">
 				<MkButton style="margin: 0 auto;" primary rounded @click="loadQuotes">{{ i18n.ts.loadReplies }}</MkButton>
 			</div>
-			<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws"/>
+			<SkNoteSub v-for="note in quotes" :key="note.id" :note="note" :class="$style.reply" :detail="true" :expandAllCws="props.expandAllCws" :reply="true"/>
 		</div>
 		<div v-else-if="tab === 'reactions'" :class="$style.tab_reactions">
 			<div :class="$style.reactionTabs">
diff --git a/packages/frontend/src/components/SkNoteSub.vue b/packages/frontend/src/components/SkNoteSub.vue
index 363dcef34..164f4e883 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>