feat(files): zoom controls for inline mermaid and images in markdown

[waleedlatif1]

Summary

• Add zoom controls (pan/zoom/fit) to mermaid diagrams rendered inline in markdown files — same experience as the full .mmd file viewer
• Add zoom controls to images embedded in markdown — wraps in ZoomablePreview with fit-to-container initial scale
• Fix fit zoom to allow upscaling small diagrams to fill the view (previously capped at 100%, leaving small SVGs tiny)

Type of Change

• New feature
• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		May 7, 2026 3:24am

[cursor]

PR Summary

Low Risk
Low risk UI/UX change limited to the file previewer, but it alters zoom/fit calculations and could affect rendering/interaction for embedded diagrams and images.

Overview
Adds zoom/pan controls to inline Mermaid diagrams rendered from markdown by enabling zoomable rendering in MermaidDiagram.

Wraps markdown-embedded images in ZoomablePreview with initialScale='fit' (disabling drag) to provide the same zoom/fit experience as other previews, and adjusts getFitZoom to allow upscaling small content instead of capping at 100%.

^{Reviewed by Cursor Bugbot for commit cd5f27e. Configure here.}

[greptile-apps]

Greptile Summary

This PR adds pan/zoom controls to inline mermaid diagrams and images in markdown previews, and fixes getFitZoom to allow upscaling small SVG content to fill the container instead of capping at 100%.

• P1: initialScale='fit' on inline markdown images, combined with the removed upscaling cap, will upscale small raster images (PNG, JPEG) up to ZOOM_MAX (4×) via CSS transform, rendering them pixelated. A 30×20 badge PNG reaches the 4× clamp; a 200×150 JPEG is upscaled ~1.56×. The cap removal is appropriate for vector mermaid SVGs but not for raster content — using initialScale='actual' for images avoids this while still offering manual zoom.

Confidence Score: 4/5

Safe to merge after fixing raster image upscaling; the mermaid zoom feature works correctly.

One P1 issue: initialScale='fit' on raster images combined with the removed upscaling cap will visibly pixelate small embedded images. No P0 issues; the mermaid zoom additions are otherwise correct.

preview-panel.tsx — the img handler's initialScale='fit' needs attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx	Adds zoomable prop to inline mermaid diagrams and wraps all markdown images in ZoomablePreview; using initialScale='fit' for raster images causes upscaling pixelation for any image smaller than the 360px container.
apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/zoomable-preview.tsx	Removes the Math.min(1, …) upscaling cap from getFitZoom, allowing content smaller than the container to be scaled up to ZOOM_MAX; correct for SVG/vector diagrams but produces pixelation for raster images.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Markdown rendered] --> B{Element type?}
    B -->|mermaid-diagram| C[MermaidDiagram with zoomable prop]
    B -->|img| D[ZoomablePreview with fit scale]
    C --> E[ZoomablePreview with fit scale and resetKey]
    E --> F[getFitZoom - upscaling cap removed]
    D --> F
    F --> G{Content vs container size?}
    G -->|Smaller content, SVG| H[Upscales to fill container - crisp]
    G -->|Smaller content, Raster| I[Upscales up to 4x - pixelated]
    G -->|Larger content| J[Downscales to fit with padding]

Loading

_{Reviews (2): Last reviewed commit: "revert(files): remove vfs url rewriting,..." | Re-trigger Greptile}

[waleedlatif1]

@greptile

[waleedlatif1]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit cd5f27e. Configure here.}