From cf617592d4ed2b8abbd06244b65ed42ca5caab79 Mon Sep 17 00:00:00 2001
From: "DESKTOP-PUHFO60\\dsx2016" <evan199101@gmail.com>
Date: Fri, 23 Oct 2026 18:45:24 +0800
Subject: [PATCH] Size HTML firmware previews by board (480x320 for 3.5).

EOF

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 components/firmware-card.tsx    |  8 +++++++-
 components/firmware-detail.tsx  |  8 +++++++-
 components/firmware-preview.tsx | 13 ++++++-------
 lib/boards.ts                   |  6 ++++++
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/firmware-card.tsx b/components/firmware-card.tsx
index 2e70b0e..360f029 100644
--- a/components/firmware-card.tsx
+++ b/components/firmware-card.tsx
@@ -31,7 +31,13 @@ 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-[4/3] w-full overflow-hidden border-b border-[var(--line)]">
+      <div
+        className={
+          fw.boardId === "esp32-3248s035"
+            ? "relative aspect-[3/2] w-full overflow-hidden border-b border-[var(--line)]"
+            : "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 && (
diff --git a/components/firmware-detail.tsx b/components/firmware-detail.tsx
index 374cec6..8a3090c 100644
--- a/components/firmware-detail.tsx
+++ b/components/firmware-detail.tsx
@@ -36,7 +36,13 @@ export function FirmwareDetail({
         </h3>
       </div>
 
-      <div className="aspect-[4/3] w-full border-b border-[var(--line)] bg-black/40">
+      <div
+        className={
+          fw.boardId === "esp32-3248s035"
+            ? "aspect-[3/2] w-full border-b border-[var(--line)] bg-black/40"
+            : "aspect-[4/3] w-full border-b border-[var(--line)] bg-black/40"
+        }
+      >
         {fw.media.preview ? (
           <FirmwarePreview fw={fw} />
         ) : fw.media.video ? (
diff --git a/components/firmware-preview.tsx b/components/firmware-preview.tsx
index 4ac2774..caba06f 100644
--- a/components/firmware-preview.tsx
+++ b/components/firmware-preview.tsx
@@ -3,12 +3,10 @@
 import { useEffect, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import type { FirmwareInfo } from "@/lib/firmware";
+import { boardPreviewSize } from "@/lib/boards";
 import { sensorMediaForProject } from "@/lib/sensor-media";
 import { cn } from "@/lib/utils";
 
-const SCREEN_W = 320;
-const SCREEN_H = 240;
-
 type Tab = "ui" | "sensor";
 
 /** On-device HTML UI mock + optional hardware still, switchable via tabs. */
@@ -24,6 +22,7 @@ export function FirmwarePreview({
   const t = useTranslations("firmware");
   const hostRef = useRef<HTMLDivElement>(null);
   const [scale, setScale] = useState(1);
+  const { w: screenW, h: screenH } = boardPreviewSize(fw.boardId);
   const sensor = sensorMediaForProject(fw.project);
   const hasUi = Boolean(fw.media.preview);
   const [tab, setTab] = useState<Tab>(hasUi ? "ui" : "sensor");
@@ -39,14 +38,14 @@ export function FirmwarePreview({
     const update = () => {
       const { width, height } = el.getBoundingClientRect();
       if (width <= 0 || height <= 0) return;
-      setScale(Math.min(width / SCREEN_W, height / SCREEN_H));
+      setScale(Math.min(width / screenW, height / screenH));
     };
 
     update();
     const ro = new ResizeObserver(update);
     ro.observe(el);
     return () => ro.disconnect();
-  }, [fw.media.preview, tab]);
+  }, [fw.media.preview, tab, screenW, screenH]);
 
   const showTabs = hasUi && Boolean(sensor);
 
@@ -113,8 +112,8 @@ export function FirmwarePreview({
             <iframe
               title={title || `${fw.name} UI preview`}
               src={fw.media.preview!}
-              width={SCREEN_W}
-              height={SCREEN_H}
+              width={screenW}
+              height={screenH}
               loading="lazy"
               sandbox="allow-scripts"
               tabIndex={-1}
diff --git a/lib/boards.ts b/lib/boards.ts
index b9dd8f0..325c71e 100644
--- a/lib/boards.ts
+++ b/lib/boards.ts
@@ -60,3 +60,9 @@ export function resolveBoardId(boardField: string | null | undefined): string {
 export function getBoard(id: string): BoardDefinition | undefined {
   return BOARDS.find((b) => b.id === id);
 }
+
+/** Logical UI resolution used by HTML firmware previews (matches UX/UY). */
+export function boardPreviewSize(boardId: string): { w: number; h: number } {
+  if (boardId === "esp32-3248s035") return { w: 480, h: 320 };
+  return { w: 320, h: 240 };
+}