Fix PDF viewer zoom, save icon as floppy disk

- PDF zoom: use native #zoom= URL fragment instead of CSS transform,
  eliminates white infinite page issue
- Save button: floppy disk icon instead of download-like arrow
- Editor font size default 6, min 6 (matches terminal)

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

Author: davindicode

app/components/files/CodeEditor.tsx

@@ -267,7 +267,7 @@ export default function CodeEditor({ path, content, onSave, onClose }: CodeEdito
             className="p-1 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 disabled:text-gray-500 text-white rounded transition-colors"
             title="Save"
           >
-            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" /></svg>
+            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M17 3H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V7l-4-4z" /><path strokeLinecap="round" strokeLinejoin="round" d="M17 3v4h-4M7 17h10M7 13h10" /></svg>
           </button>
           <button
             onClick={onClose}

app/components/files/FileViewer.tsx

@@ -53,26 +53,14 @@ function MediaViewer({ path, type, onClose }: { path: string; type: "video" | "a
 }
 
 function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
-  const [zoom, setZoom] = useState(1);
-  const lastDistance = useRef(0);
+  const [zoomPct, setZoomPct] = useState(100);
 
-  const zoomIn = () => setZoom((z) => Math.min(5, z + 0.25));
-  const zoomOut = () => setZoom((z) => Math.max(0.25, z - 0.25));
-  const zoomFit = () => setZoom(1);
+  const zoomIn = () => setZoomPct((z) => Math.min(500, z + 25));
+  const zoomOut = () => setZoomPct((z) => Math.max(25, z - 25));
+  const zoomFit = () => setZoomPct(100);
 
-  const handleTouchMove = (e: React.TouchEvent) => {
-    if (e.touches.length !== 2) return;
-    const dx = e.touches[0].clientX - e.touches[1].clientX;
-    const dy = e.touches[0].clientY - e.touches[1].clientY;
-    const dist = Math.sqrt(dx * dx + dy * dy);
-    if (lastDistance.current > 0) {
-      const delta = (dist - lastDistance.current) * 0.005;
-      setZoom((z) => Math.max(0.25, Math.min(5, z + delta)));
-    }
-    lastDistance.current = dist;
-  };
-
-  const handleTouchEnd = () => { lastDistance.current = 0; };
+  // Use PDF viewer's built-in zoom via URL fragment
+  const pdfUrl = `/api/files/download?path=${encodeURIComponent(path)}&inline=1#zoom=${zoomPct}`;
 
   return (
     <div className="flex flex-col h-full">
@@ -81,7 +69,7 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
         <div className="flex items-center gap-2">
           <div className="flex items-center gap-1 border border-gray-700 rounded overflow-hidden">
             <button onClick={zoomOut} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">-</button>
-            <button onClick={zoomFit} className="px-2 py-0.5 text-[10px] text-gray-400 hover:text-white hover:bg-gray-700 tabular-nums">{Math.round(zoom * 100)}%</button>
+            <button onClick={zoomFit} className="px-2 py-0.5 text-[10px] text-gray-400 hover:text-white hover:bg-gray-700 tabular-nums">{zoomPct}%</button>
             <button onClick={zoomIn} className="px-2 py-0.5 text-xs text-gray-400 hover:text-white hover:bg-gray-700">+</button>
           </div>
           <a
@@ -101,27 +89,12 @@ function PdfViewer({ path, onClose }: { path: string; onClose: () => void }) {
           </button>
         </div>
       </div>
-      <div
-        className="flex-1 min-h-0 overflow-auto bg-[#0d0d1a] relative"
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        {/* Spacer to create scrollable area at zoomed size */}
-        <div style={{ width: `${zoom * 100}%`, height: `${zoom * 100}%` }} />
-        {/* Iframe at full size, scaled via CSS transform */}
+      <div className="flex-1 min-h-0 bg-[#0d0d1a]">
         <iframe
-          src={`/api/files/download?path=${encodeURIComponent(path)}&inline=1`}
+          key={zoomPct}
+          src={pdfUrl}
           title={path}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            width: `${100 / zoom}%`,
-            height: `${100 / zoom}%`,
-            border: "none",
-            transform: `scale(${zoom})`,
-            transformOrigin: "top left",
-          }}
+          className="w-full h-full border-0"
         />
       </div>
     </div>