Fixes to thumbnail dropdown

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>
 

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%;

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