Fix image panning constraints for wide/short images in plot viewer

[Copilot]

Problem

When viewing wide but short images (or any extreme aspect ratio) in the plot viewer, users experienced panning constraints that prevented them from viewing the entire image when zoomed in. Specifically:

• After zooming in on a wide but short image, dragging to the right would not reveal the rightmost portions
• Blank space would increasingly appear on the left as the user attempted to pan right
• The image would get "stuck" and certain portions remained permanently out of view

This issue was reported in #[issue_number] with a detailed reproduction showing matplotlib time series plots that are very wide but short.

Root Cause

The ReactSVGPanZoom component in src/webviews/webview-side/react-common/svgViewer.tsx was using the default value for the preventPanOutside property, which restricts image panning to keep content within the viewport boundaries. While this works well for images that roughly fit the viewport, it creates problems for images with extreme aspect ratios where the constrained dimension becomes over-restricted.

Solution

Added preventPanOutside={false} to the ReactSVGPanZoom component to allow free panning of images in all directions. This enables users to view all parts of any image regardless of aspect ratio, without artificial boundary restrictions.

The change is minimal and surgical - a single boolean property addition that doesn't affect any other functionality. Users can still easily recenter or reset the view using the existing toolbar controls (pan, zoom in, zoom out).

Testing

• ✅ Compilation passes without errors
• ✅ Linting shows no issues
• ✅ All existing unit tests pass
• ✅ Code formatting is compliant

Impact

This fix improves the user experience for viewing plots of any aspect ratio, particularly benefiting users who create wide time series plots or other visualizations that don't match typical screen dimensions.

Fixes #[issue_number]

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Expand Image gets stuck when showing a wide but short image.</issue_title>
<issue_description>

Environment data

• VS Code version: 1.65.2 (Universal)
• Jupyter Extension version: v2022.2.1030672458
• Python Extension version: v2022.2.1924087327
• OS: MacOS
• Python version: 3.9
• Type of virtual environment used: virtualenv
• Jupyter server running: Local

Expected behaviour

The expand image can zoom and drag smoothly.

Actual behaviour / Steps to reproduce:

After I draw a very wide but short image to show a time series and click the Expand Image button, the preview will get stuck when I enlarge it and drag from right to left.
This is the full image and I can drag it well.

But when I enlarge the image, I can't see the right part anyway.

The screenshot above is the rightest I can drag.

However, the left blank becomes more.

I record a gif to show this issue.

the possible solution

I find that there is a <autosizer> outside the <ReactSVGPanZoom> in svgViewer.tsx(https://github.com/microsoft/vscode-jupyter/blob/main/src/datascience-ui/react-common/svgViewer.tsx), I think it's useless or at least the key, maybe we can remove it?
</issue_description>

Comments on the Issue (you are @copilot in this section)

@DonJayamanne Thanks for filing this issue, I've been unable to repro this issue at my end, however I can see the issue from the recording. thanks. Is it possible to save the image you have and upload that here, so we can use that to replicate this issue. thanks

Fixes #9349

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.