Fix firmware HTML preview centering and fill.

Scale the 320x240 iframe from the card container so covers stay centered and fully visible.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/firmware-card.tsx

@@ -31,7 +31,7 @@ export function FirmwareCard({
           : "border-[var(--line)] bg-[rgba(0,0,0,0.22)] hover:-translate-y-0.5 hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.04)]"
       )}
     >
-      <div className="relative aspect-[16/10] w-full overflow-hidden border-b border-[var(--line)]">
+      <div className="relative aspect-[4/3] w-full overflow-hidden border-b border-[var(--line)]">
         <FirmwarePreview fw={fw} />
         <div className="pointer-events-none absolute bottom-2 left-2 flex gap-1">
           {hasPreview && (

components/firmware-preview.tsx

@@ -1,8 +1,12 @@
 "use client";
 
+import { useEffect, useRef, useState } from "react";
 import type { FirmwareInfo } from "@/lib/firmware";
 import { cn } from "@/lib/utils";
 
+const SCREEN_W = 320;
+const SCREEN_H = 240;
+
 /** Renders HTML on-device UI mock (preferred) — never uses raster covers. */
 export function FirmwarePreview({
   fw,
@@ -13,16 +17,49 @@ export function FirmwarePreview({
   className?: string;
   title?: string;
 }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const [scale, setScale] = useState(1);
+
+  useEffect(() => {
+    const el = hostRef.current;
+    if (!el) return;
+
+    const update = () => {
+      const { width, height } = el.getBoundingClientRect();
+      if (width <= 0 || height <= 0) return;
+      setScale(Math.min(width / SCREEN_W, height / SCREEN_H));
+    };
+
+    update();
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [fw.media.preview]);
+
   if (fw.media.preview) {
     return (
-      <iframe
-        title={title || `${fw.name} UI preview`}
-        src={fw.media.preview}
-        className={cn("h-full w-full border-0 bg-[#0A1016]", className)}
-        loading="lazy"
-        sandbox="allow-scripts"
-        tabIndex={-1}
-      />
+      <div
+        ref={hostRef}
+        className={cn(
+          "relative h-full w-full overflow-hidden bg-[#0A1016]",
+          className
+        )}
+      >
+        <iframe
+          title={title || `${fw.name} UI preview`}
+          src={fw.media.preview}
+          width={SCREEN_W}
+          height={SCREEN_H}
+          loading="lazy"
+          sandbox="allow-scripts"
+          tabIndex={-1}
+          className="pointer-events-none absolute left-1/2 top-1/2 border-0 bg-[#0A1016]"
+          style={{
+            transform: `translate(-50%, -50%) scale(${scale})`,
+            transformOrigin: "center center",
+          }}
+        />
+      </div>
     );
   }