Improve /vods layout and show more thumbnails

AGENTS.md

@@ -20,6 +20,7 @@
 
 ## React
 
+- project uses Remix as metaframework
 - prefer functional components over class components
 - prefer using hooks over class lifecycle methods
 - do not use `useMemo`, `useCallback` or `useReducer` at all

app/features/vods/components/VodListing.tsx

@@ -17,7 +17,11 @@ export function VodListing({
 	return (
 		<div className="vods__listing">
 			<Link to={vodVideoPage(vod.id)} className="stack sm">
-				<img alt="" src={youtubeIdToThumbnailUrl(vod.youtubeId)} />
+				<img
+					className="vods__listing__thumbnail"
+					alt=""
+					src={youtubeIdToThumbnailUrl(vod.youtubeId)}
+				/>
 				<h2 className="text-sm text-main-forced">{vod.title}</h2>
 			</Link>
 			<div className="vods__listing__info">
@@ -63,5 +67,5 @@ function WeaponsPeek({ weapons }: { weapons: ListVod["weapons"] }) {
 }
 
 function youtubeIdToThumbnailUrl(youtubeId: string) {
-	return `http://img.youtube.com/vi/${youtubeId}/maxresdefault.jpg`;
+	return `http://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`;
 }

app/features/vods/vods.css

@@ -56,6 +56,14 @@
 	max-width: 355px;
 }
 
+.vods__listing__thumbnail {
+	aspect-ratio: 16 / 9;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	min-width: 355px;
+}
+
 .vods__listing__info {
 	display: flex;
 	justify-content: space-between;