fix(plex): every small Plex picture asks for its card-size cut

The playlist rows, the search box and the collection picker still
fetched the 400px poster for a 32-80px picture. A contract test pins the
set of bare Plex pictures, and the srcset widths to imgcache.SIZES.

frontend/src/components/PlexPlaylistView.tsx

@@ -55,6 +55,7 @@ import { SURFACE } from "./ui/surfaces";
 import { PageHeading } from "./ui/Headings";
 import { MEDIA_BADGE } from "./ui/mediaCardStyles";
 import { seasonTitle } from "../lib/plexDetail";
+import { cardImage } from "../lib/plexImage";
 
 // A playlist's items, grouped for readability: movies stay standalone, while a run of episodes from the
 // same show collapses into a season/show group so a whole series doesn't sprawl into an endless flat
@@ -157,7 +158,7 @@ function Poster({ src, className }: { src: string; className: string }) {
     <div
       className={`relative shrink-0 overflow-hidden rounded-sm border border-border bg-surface ${className}`}
     >
-      <img src={src} alt="" loading="lazy" className="h-full w-full object-cover" />
+      <img {...cardImage(src)} alt="" loading="lazy" className="h-full w-full object-cover" />
     </div>
   );
 }
@@ -200,7 +201,12 @@ function EpisodeRow({ ep, ctx, dense }: { ep: PlexCard; ctx: Ctx; dense: boolean
         <div
           className={`relative shrink-0 overflow-hidden rounded-sm border border-border bg-surface ${dense ? "aspect-video w-14" : "aspect-video w-20"}`}
         >
-          <img src={ep.thumb} alt="" loading="lazy" className="h-full w-full object-cover" />
+          <img
+            {...cardImage(ep.thumb)}
+            alt=""
+            loading="lazy"
+            className="h-full w-full object-cover"
+          />
           {ep.status === "watched" && <span className={`${MEDIA_BADGE} right-0.5 top-0.5`}>✓</span>}
           {inProgress && <div className="absolute inset-x-0 bottom-0 h-0.5 bg-accent" />}
           <div className="absolute inset-0 grid place-items-center bg-black/40 opacity-0 transition group-hover/thumb:opacity-100">
@@ -319,7 +325,7 @@ function ShowGroup({ block, ctx }: { block: ShowBlock; ctx: Ctx }) {
             {block.items.slice(0, 3).map((ep, i) => (
               <img
                 key={ep.id}
-                src={ep.thumb}
+                {...cardImage(ep.thumb)}
                 alt=""
                 loading="lazy"
                 className="aspect-2/3 w-8 rounded-sm border-2 border-surface object-cover"