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/PlexLibraryPicker.tsx

@@ -5,6 +5,7 @@ import { qk } from "../lib/queryKeys";
 import { api, type PlexCard } from "../lib/api";
 import { useDebounced } from "../lib/useDebounced";
 import { LoadingState } from "./ui/QueryState";
+import { cardImage } from "../lib/plexImage";
 
 // A debounced library search-and-pick list, shared by the "Add title" panel (PlexCollectionView) and
 // the "New collection" first-title panel (plexBrowseLists) — both search the library the same way and
@@ -49,7 +50,7 @@ export default function PlexLibraryPicker({
       {results.map((c) => (
         <li key={c.id} className="flex items-center gap-3">
           <img
-            src={c.thumb}
+            {...cardImage(c.thumb)}
             alt=""
             className="h-12 w-8 shrink-0 rounded object-cover"
             loading="lazy"

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"

frontend/src/components/PlexSearchBox.tsx

@@ -12,6 +12,7 @@ import { availablePlexFields, healPlexField, plexFieldLabelKey } from "../lib/pl
 import { Pressable } from "./ui/Pressable";
 import { SURFACE } from "./ui/surfaces";
 import { ROVING_HIGHLIGHT } from "./ui/AnchoredPopover";
+import { cardImage } from "../lib/plexImage";
 
 // The Plex header search box: the shared SearchBar enriched with the S2 search scope-pill (a
 // GitHub-style field selector inside the box) and an instant typeahead of the top matches attached
@@ -160,7 +161,7 @@ export default function PlexSearchBox() {
                   className={`flex w-full items-center gap-3 rounded-lg p-1.5 transition ${ROVING_HIGHLIGHT}`}
                 >
                   <img
-                    src={c.thumb}
+                    {...cardImage(c.thumb)}
                     alt=""
                     loading="lazy"
                     className="h-12 w-8 shrink-0 rounded-md object-cover bg-border/40"