Merge remote-tracking branch 'makhuta/main' into update/1.16.17

Modified author button and video thumbnail

materialious/src/lib/components/Author.svelte

@@ -60,7 +60,7 @@
 		<nav style="gap: 0.5em;">
 			<img class="circle large" {...avatar.image} alt="Channel profile" />
 			<button
-				class="large secondary-container"
+				class="circle large secondary-container"
 				{...mergeAttrs(avatar.fallback, {
 					style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
 				})}>{channel.author[0]}</button

materialious/src/lib/components/AuthorAvatar.svelte

@@ -21,7 +21,7 @@
 
 <img class="circle small" {...avatar.image} alt="Channel profile" />
 <button
-	class="secondary-container"
+	class="circle secondary-container"
 	{...mergeAttrs(avatar.fallback, {
 		style: 'text-transform: uppercase;border-radius: 2.5rem !important;'
 	})}>{author[0]}</button

materialious/src/lib/components/thumbnail/VideoThumbnail.svelte

@@ -110,7 +110,7 @@
 	}
 </script>
 
-<div class:sideways-root={sideways} tabindex="0" role="button">
+<div class:sideways-root={sideways} style="height: 100%; display: flex; flex-direction: column;" tabindex="0" role="button">
 	<div id="thumbnail-container">
 		<!-- eslint-disable svelte/no-navigation-without-resolve -->
 		<a
@@ -168,8 +168,8 @@
 		</a>
 	</div>
 
-	<div class="thumbnail-details video-title">
-		<div class="video-title">
+	<div class="thumbnail-details video-title" style="flex: 1;">
+		<div class="video-title" style="height: 100%; display: flex; flex-direction: column;">
 			<a
 				tabindex="-1"
 				style="padding-left: 1px;"
@@ -178,10 +178,10 @@
 				href={watchUrl.toString()}
 				onclick={onVideoSelected}
 			>
-				<span class="bold">{letterCase(video.title.trimEnd())}</span>
+				<span class="bold" style="width: 100%;">{letterCase(video.title.trimEnd())}</span>
 			</a>
 
-			<nav>
+			<nav style="flex: 1; align-items: end;">
 				{#if !sideways && 'authorId' in video}
 					<AuthorAvatar author={video.author} authorId={video.authorId} />
 				{/if}