From 2944f4db25d15a4b2775db0785c7f9ccf0ecf175 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 17 Mar 2026 11:25:00 +1300
Subject: [PATCH] Fixes to thumbnail dropdown

---
 .../components/layout/ContentColumn.svelte    |  8 +++++--
 .../thumbnail/VideoThumbnail.svelte           | 23 +++++++++++++++----
 materialious/src/lib/time.ts                  |  4 ++--
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/materialious/src/lib/components/layout/ContentColumn.svelte b/materialious/src/lib/components/layout/ContentColumn.svelte
index a4841e06..b25fb35f 100644
--- a/materialious/src/lib/components/layout/ContentColumn.svelte
+++ b/materialious/src/lib/components/layout/ContentColumn.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isAndroidTvStore } from '$lib/store';
-	import { onMount } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 
 	let { children } = $props();
 
@@ -21,7 +21,11 @@
 	onMount(() => {
 		checkWidth();
 
-		addEventListener('resize', () => checkWidth());
+		addEventListener('resize', checkWidth);
+	});
+
+	onDestroy(() => {
+		removeEventListener('resize', checkWidth);
 	});
 </script>
 
diff --git a/materialious/src/lib/components/thumbnail/VideoThumbnail.svelte b/materialious/src/lib/components/thumbnail/VideoThumbnail.svelte
index 8be04f72..dedaab13 100644
--- a/materialious/src/lib/components/thumbnail/VideoThumbnail.svelte
+++ b/materialious/src/lib/components/thumbnail/VideoThumbnail.svelte
@@ -323,7 +323,7 @@
 						authorId={'authorId' in video ? video.authorId : ''}
 					/>
 				{/if}
-				<div style="width: 82%;">
+				<div class="author-details">
 					<nav style="justify-content: space-between;width: 100%;">
 						<div>
 							{#if 'authorId' in video && video.authorId}
@@ -349,13 +349,13 @@
 							{/if}
 
 							{#if 'published' in video}
-								<div>
+								<span>
 									{video.viewCountText ?? cleanNumber(video.viewCount ?? 0)}
 									•
 									{video.published && video.published !== 0
 										? relativeTimestamp(video.published * 1000, false)
 										: video.publishedText}
-								</div>
+								</span>
 							{/if}
 						</div>
 						{#if !sideways}
@@ -427,12 +427,20 @@
 		overflow: hidden;
 	}
 
-	.sideways-root .video-title span {
+	.author-details span,
+	.author-details p,
+	.author-details a {
 		display: block;
 		white-space: normal;
-		overflow: hidden;
 		word-wrap: break-word;
 		line-height: 1.2;
+
+		font-size: clamp(0.65rem, 2.5cqw + 0.3rem, 1.15rem);
+	}
+
+	.author-details {
+		flex: 1;
+		min-width: 0;
 	}
 
 	.video-title {
@@ -473,6 +481,11 @@
 		background-color: transparent;
 	}
 
+	.sideways-root,
+	.thumbnail-details {
+		container-type: inline-size;
+	}
+
 	@media screen and (max-width: 1800px) {
 		.sideways-root .thumbnail {
 			width: 100%;
diff --git a/materialious/src/lib/time.ts b/materialious/src/lib/time.ts
index f0c6b17c..cef2afae 100644
--- a/materialious/src/lib/time.ts
+++ b/materialious/src/lib/time.ts
@@ -32,9 +32,9 @@ export function relativeTimestamp(epochTime: number, includeTime: boolean = true
 	if (isSameDay || isSameWeek) {
 		return diffDuration.humanize(true);
 	} else if (isThisYear) {
-		return timestamp.format(`MMMM Do ${time}`);
+		return timestamp.format(`MMM Do ${time}`);
 	} else {
-		return timestamp.format(`MMMM Do YYYY ${time}`);
+		return timestamp.format(`MMM Do YYYY ${time}`);
 	}
 }