From fc7ec77721a57bfbdabbdffd0af018537cf59a88 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 7 Feb 2026 15:08:13 +1300
Subject: [PATCH] Improved comments

---
 .../src/lib/components/watch/Comment.svelte        |  4 ++--
 .../src/routes/(app)/watch/[slug]/+page.svelte     | 14 ++++++++++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/materialious/src/lib/components/watch/Comment.svelte b/materialious/src/lib/components/watch/Comment.svelte
index 5f8e9f6c..38ba9b07 100644
--- a/materialious/src/lib/components/watch/Comment.svelte
+++ b/materialious/src/lib/components/watch/Comment.svelte
@@ -7,7 +7,7 @@
 	import { interfaceLowBandwidthMode } from '$lib/store';
 	import { onMount } from 'svelte';
 	import CommentSelf from './Comment.svelte';
-	import { insecureRequestImageHandler } from '$lib/misc';
+	import { insecureRequestImageHandler, truncate } from '$lib/misc';
 	import { _ } from '$lib/i18n';
 
 	interface Props {
@@ -68,7 +68,7 @@
 			<div class="comment-info">
 				<a href={resolve(`/channel/[authorId]`, { authorId: comment.authorId })} class="author">
 					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
-						{comment.author}
+						{truncate(comment.author, 12)}
 					</span>
 					<span class="secondary-text">{comment.publishedText}</span>
 				</a>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 82aa5917..42f1ac4b 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -536,7 +536,7 @@
 		{/if}
 
 		{#if comments && comments.comments.length > 0}
-			<article class="border">
+			<article class="border comment-list">
 				<details>
 					<summary id="comment-section" class="none bold">
 						<nav>
@@ -551,7 +551,11 @@
 							<Comment {comment} videoId={data.video.videoId}></Comment>
 						{/each}
 						{#if comments.continuation}
-							<button onclick={loadMoreComments} class="margin">{$_('loadMore')}</button>
+							<div class="space"></div>
+							<button onclick={loadMoreComments} class="secondary">
+								<i>read_more</i>
+								<span>{$_('loadMore')}</span>
+							</button>
 						{/if}
 					</div>
 				</details>
@@ -713,6 +717,12 @@
 		overflow-x: hidden;
 	}
 
+	.comment-list {
+		max-height: 600px;
+		overflow-y: scroll;
+		overflow-x: hidden;
+	}
+
 	.recommended {
 		margin-top: calc(var(--video-player-height) * -1);
 	}