HTML preview: replace font size with zoom controls

- HTML preview shows zoom controls (-/100%/+) instead of font size
- Zoom range 25%-300% via CSS transform scale on iframe
- Font size controls still shown for editor, markdown, and notebook
- Controls swap automatically based on file type and mode

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: davindicode

app/components/files/CodeEditor.tsx

@@ -67,19 +67,29 @@ function MarkdownPreview({ content, fontSize }: { content: string; fontSize: num
   );
 }
 
-function HtmlPreview({ content }: { content: string }) {
+function HtmlPreview({ content, zoom }: { content: string; zoom: number }) {
   const blob = useMemo(() => {
     const b = new Blob([content], { type: "text/html" });
     return URL.createObjectURL(b);
   }, [content]);
 
+  const scale = zoom / 100;
+
   return (
-    <iframe
-      src={blob}
-      className="w-full h-full border-0 bg-white"
-      title="HTML Preview"
-      sandbox="allow-scripts"
-    />
+    <div className="w-full h-full overflow-auto bg-white">
+      <iframe
+        src={blob}
+        title="HTML Preview"
+        sandbox="allow-scripts"
+        style={{
+          border: "none",
+          width: `${100 / scale}%`,
+          height: `${100 / scale}%`,
+          transform: `scale(${scale})`,
+          transformOrigin: "0 0",
+        }}
+      />
+    </div>
   );
 }
 
@@ -194,6 +204,8 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
   const [dirty, setDirty] = useState(false);
   const [mode, setMode] = useState<"edit" | "preview">(canPreview ? "preview" : "edit");
   const [editorFontSize, setEditorFontSize] = useState(6);
+  const isHtml = ext === "html" || ext === "htm";
+  const [htmlZoom, setHtmlZoom] = useState(100);
 
   const handleChange = (v: string | undefined) => {
     if (v !== undefined) {
@@ -237,22 +249,30 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
               </button>
             </div>
           )}
-          {/* Font size */}
-          <div className="flex items-center border border-gray-700 rounded overflow-hidden">
-            <button
-              onClick={() => setEditorFontSize((s) => Math.max(6, s - 1))}
-              className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
-            >
-              <span className="text-[9px] font-bold">a</span>
-            </button>
-            <span className="text-[10px] text-gray-500 w-5 text-center tabular-nums">{editorFontSize}</span>
-            <button
-              onClick={() => setEditorFontSize((s) => Math.min(32, s + 1))}
-              className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
-            >
-              <span className="text-[14px] font-bold">A</span>
-            </button>
-          </div>
+          {/* Font size / Zoom controls */}
+          {isHtml && mode === "preview" ? (
+            <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">
+              <button onClick={() => setHtmlZoom((z) => Math.max(25, z - 25))} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">-</button>
+              <button onClick={() => setHtmlZoom(100)} className="px-2 py-0.5 text-[10px] text-gray-400 hover:text-white hover:bg-gray-700 tabular-nums">{htmlZoom}%</button>
+              <button onClick={() => setHtmlZoom((z) => Math.min(300, z + 25))} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">+</button>
+            </div>
+          ) : (
+            <div className="flex items-center border border-gray-700 rounded overflow-hidden">
+              <button
+                onClick={() => setEditorFontSize((s) => Math.max(6, s - 1))}
+                className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
+              >
+                <span className="text-[9px] font-bold">a</span>
+              </button>
+              <span className="text-[10px] text-gray-500 w-5 text-center tabular-nums">{editorFontSize}</span>
+              <button
+                onClick={() => setEditorFontSize((s) => Math.min(32, s + 1))}
+                className="px-1.5 py-0.5 text-gray-400 hover:text-white hover:bg-gray-700 transition-colors leading-none"
+              >
+                <span className="text-[14px] font-bold">A</span>
+              </button>
+            </div>
+          )}
           <a
             href={`/api/files/download?path=${encodeURIComponent(path)}`}
             download
@@ -286,7 +306,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
           ext === "ipynb" ? (
             <NotebookPreview content={value} fontSize={editorFontSize} />
           ) : ext === "html" || ext === "htm" ? (
-            <HtmlPreview content={value} />
+            <HtmlPreview content={value} zoom={htmlZoom} />
           ) : (
             <MarkdownPreview content={value} fontSize={editorFontSize} />
           )