From 3f263fab28457b9cc7b6c8e75bff050b8b6bcacb Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 7 Apr 2026 17:26:24 +1200
Subject: [PATCH] Minor improvements when on small screens

---
 materialious/src/lib/components/Author.svelte      |  6 +++---
 .../src/lib/components/AuthorAvatar.svelte         | 14 ++++++++++----
 .../src/lib/components/settings/Interface.svelte   | 13 +------------
 .../src/routes/(app)/watch/[slug]/+page.svelte     |  4 ++++
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/materialious/src/lib/components/Author.svelte b/materialious/src/lib/components/Author.svelte
index 52271317..ebe67f81 100644
--- a/materialious/src/lib/components/Author.svelte
+++ b/materialious/src/lib/components/Author.svelte
@@ -58,16 +58,16 @@
 <nav>
 	<a href={resolve(`/channel/[authorId]`, { authorId: channel.authorId })}>
 		<nav style="gap: 0.5em;">
-			<img class="circle large" {...avatar.image} alt="Channel profile" />
+			<img class="circle" {...avatar.image} alt="Channel profile" />
 			<button
-				class="circle large secondary-container"
+				class="circle small secondary-container"
 				{...mergeAttrs(avatar.fallback, {
 					style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
 				})}>{channel.author[0]}</button
 			>
 			<div>
 				<p style="margin: 0;" class="bold">
-					{$isAndroidTvStore ? channel.author : truncate(channel.author, 16)}
+					{$isAndroidTvStore ? channel.author : truncate(channel.author, 14)}
 				</p>
 				<p style="margin: 0;">{channel.subCountText}</p>
 			</div>
diff --git a/materialious/src/lib/components/AuthorAvatar.svelte b/materialious/src/lib/components/AuthorAvatar.svelte
index 59686950..133ab348 100644
--- a/materialious/src/lib/components/AuthorAvatar.svelte
+++ b/materialious/src/lib/components/AuthorAvatar.svelte
@@ -19,14 +19,20 @@
 			if (src) avatarSrc = proxyGoogleImage(src);
 		});
 	});
+
+	function goToChannel() {
+		goto(resolve('/channel/[authorId]', { authorId }));
+	}
 </script>
 
-<img class="circle small" {...avatar.image} alt="Channel profile" />
+<img
+	class="circle small"
+	{...mergeAttrs(avatar.image, { onclick: goToChannel })}
+	alt="Channel profile"
+/>
 <button
 	class="circle secondary-container"
-	onclick={() => {
-		goto(resolve('/channel/[authorId]', { authorId }));
-	}}
+	onclick={goToChannel}
 	{...mergeAttrs(avatar.fallback, {
 		style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
 	})}>{author[0]}</button
diff --git a/materialious/src/lib/components/settings/Interface.svelte b/materialious/src/lib/components/settings/Interface.svelte
index 9d6a14ea..6c55af03 100644
--- a/materialious/src/lib/components/settings/Interface.svelte
+++ b/materialious/src/lib/components/settings/Interface.svelte
@@ -130,7 +130,7 @@
 		<form onsubmit={setInstance}>
 			<nav>
 				<div
-					class="field prefix suffix label surface-container-highest max"
+					class="field prefix label surface-container-highest max"
 					class:invalid={invalidInstance}
 				>
 					<i>link</i>
@@ -144,17 +144,6 @@
 					{#if invalidInstance}
 						<span class="error">{$_('invalidInstance')}</span>
 					{/if}
-					{#if $invidiousInstanceStore}
-						<i
-							role="presentation"
-							class="front"
-							onclick={() => {
-								invidiousInstanceStore.set(undefined);
-								invidiousInstance = undefined;
-								invidiousLogout();
-							}}>close</i
-						>
-					{/if}
 				</div>
 				<button class="circle">
 					<i>done</i>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 8cd2598e..d212beae 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -557,6 +557,10 @@
 		height: 50vh;
 	}
 
+	.video-actions button {
+		margin-left: 0;
+	}
+
 	@media screen and (max-width: 1200px) {
 		.video-actions {
 			align-items: flex-start;