From 5017a77d8c4349049ba3be8cb734401e48084e35 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Wed, 6 May 2026 20:23:59 -0700
Subject: [PATCH] feat(files): zoom controls for inline mermaid and images in
 markdown
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add pan/zoom/fit controls to mermaid diagrams rendered inline in markdown — same experience as the standalone .mmd viewer
- Wrap inline markdown images in ZoomablePreview with fit-to-container scale
- Allow fit zoom to upscale small diagrams to fill the view (previously capped at 100%)
---
 .../components/file-viewer/preview-panel.tsx  | 24 +++++++++++++------
 .../file-viewer/zoomable-preview.tsx          |  2 +-
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index 36966864095..75e49d38494 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -495,7 +495,14 @@ const STATIC_MARKDOWN_COMPONENTS = {
   ),
   'mermaid-diagram': ({ definition }: { definition?: string }) => {
     const isStreaming = useContext(MermaidStreamingCtx)
-    return <MermaidDiagram definition={definition ?? ''} isStreaming={isStreaming} />
+    return (
+      <MermaidDiagram
+        definition={definition ?? ''}
+        isStreaming={isStreaming}
+        zoomable
+        zoomClassName='my-4 h-[420px] rounded-lg'
+      />
+    )
   },
   p: ({ children }: { children?: React.ReactNode }) => (
     <p className='mb-3 break-words text-[14px] text-[var(--text-primary)] leading-[1.6] last:mb-0'>
@@ -619,12 +626,15 @@ const STATIC_MARKDOWN_COMPONENTS = {
   img: ({ src, alt }: React.ImgHTMLAttributes<HTMLImageElement>) => {
     const resolvedSrc = resolveSimFileUrl(typeof src === 'string' ? src : undefined)
     return (
-      <img
-        src={resolvedSrc}
-        alt={alt ?? ''}
-        className='my-3 max-w-full rounded-md'
-        loading='lazy'
-      />
+      <ZoomablePreview className='my-3 h-[360px] rounded-md' initialScale='actual'>
+        <img
+          src={resolvedSrc}
+          alt={alt ?? ''}
+          className='max-h-full max-w-full select-none object-contain'
+          draggable={false}
+          loading='lazy'
+        />
+      </ZoomablePreview>
     )
   },
   table: ({ children }: { children?: React.ReactNode }) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
index bcdb3aa9e06..151b4325a8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx
@@ -47,7 +47,7 @@ function getFitZoom(container: Size, content: Size): number {
 
   const availableWidth = Math.max(1, container.width - FIT_PADDING)
   const availableHeight = Math.max(1, container.height - FIT_PADDING)
-  return clampZoom(Math.min(1, availableWidth / content.width, availableHeight / content.height))
+  return clampZoom(Math.min(availableWidth / content.width, availableHeight / content.height))
 }
 
 function clampOffset(container: Size, content: Size, offset: Offset, zoom: number): Offset {