feat(web): rework mod page header layout

Show the game name and thumbnail in the header, float the action buttons and object GUID to the right, and keep the viewer icon, label, and GUID on one line.

apps/web/src/pages/ModPage.tsx

@@ -41,13 +41,24 @@ export default function ModPage() {
 
   return (
     <div className="space-y-6">
-      <div>
-        <h1 className="text-2xl font-semibold">Mod {id}</h1>
-        <p className="mt-1 text-sm text-zinc-400">
-          {mod.GameMode} · {mod.Date} · {tree.length} objects · {refs.length}{' '}
-          asset refs
-        </p>
-        <div className="mt-3 flex gap-2">
+      <div className="flex items-start gap-4">
+        {item?.previewImageUrl && (
+          <img
+            src={item.previewImageUrl}
+            alt={item.title}
+            className="h-20 w-20 shrink-0 rounded-lg border border-zinc-800 object-cover"
+          />
+        )}
+        <div className="min-w-0 flex-1">
+          <h1 className="truncate text-2xl font-semibold">
+            {item?.title ?? `Mod ${id}`}
+          </h1>
+          <p className="mt-1 text-sm text-zinc-400">
+            <span className="font-mono">{id}</span> · {mod.GameMode} ·{' '}
+            {mod.Date} · {tree.length} objects · {refs.length} asset refs
+          </p>
+        </div>
+        <div className="flex shrink-0 gap-2">
           <a
             href={modFileUrl(id!, item?.fileUrl)}
             className="inline-block rounded-lg bg-zinc-100 px-4 py-2 text-sm font-medium text-zinc-900 hover:bg-zinc-300"
@@ -75,20 +86,23 @@ export default function ModPage() {
         <section className="rounded-lg border border-zinc-800 bg-zinc-900 p-4">
           {selected ? (
             <>
-              <header className="mb-4">
+              <header className="mb-4 flex items-center gap-2">
                 <span
                   title={selected.object.Name}
-                  className="inline-flex items-center gap-1 text-zinc-400"
+                  className="inline-flex shrink-0 items-center gap-1 text-zinc-400"
                 >
                   {iconsForObject(selected.object.Name).map((icon) => (
                     <Icon key={icon} icon={icon} className="h-5 w-5" />
                   ))}
                 </span>
-                <h2 className="mt-1 text-lg font-semibold">{selected.label}</h2>
-                <p className="font-mono text-xs text-zinc-500">
+                <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">
+                  {selected.label}
+                </h2>
+                <span className="shrink-0 font-mono text-xs text-zinc-500">
                   {selected.object.GUID}
-                </p>
+                </span>
               </header>
+
               {Viewer && (
                 <ErrorBoundary>
                   <Suspense