Improved comments

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>

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);
 	}