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>
+      <div className="flex items-start gap-4">
-        <h1 className="text-2xl font-semibold">Mod {id}</h1>
+        {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">
-          {mod.GameMode} · {mod.Date} · {tree.length} objects · {refs.length}{' '}
+            <span className="font-mono">{id}</span> · {mod.GameMode} ·{' '}
-          asset refs
+            {mod.Date} · {tree.length} objects · {refs.length} asset refs
           </p>
-        <div className="mt-3 flex gap-2">
+        </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>
+                <h2 className="min-w-0 flex-1 truncate text-lg font-semibold">
-                <p className="font-mono text-xs text-zinc-500">
+                  {selected.label}
+                </h2>
+                <span className="shrink-0 font-mono text-xs text-zinc-500">
                   {selected.object.GUID}
-                </p>
+                </span>
               </header>
+
               {Viewer && (
                 <ErrorBoundary>
                   <Suspense