Fix SVG viewer panning issue for wide images by removing AutoSizer

[Copilot]

The SVG viewer was getting stuck when trying to pan wide but short images horizontally after zooming in. This occurred because the AutoSizer component was constraining the ReactSVGPanZoom viewport to the container dimensions, which interfered with panning calculations for content that was much wider than the viewport.

Problem

When displaying wide but short images (like time series plots):

1. AutoSizer would provide small viewport dimensions (e.g., 400×300) based on container size
2. The actual SVG content was much wider (e.g., 2000×200)
3. After zooming in, panning calculations would fail due to this viewport/content size mismatch
4. Users couldn't pan horizontally to see different parts of the wide image

Solution

Replaced AutoSizer with fixed dimensions for ReactSVGPanZoom while maintaining responsiveness:

• Before: AutoSizer → dynamic viewport dimensions → unstable panning calculations
• After: Fixed viewport (800×600) + CSS styling → stable panning + responsive container filling

The fix uses:

• Fixed width={800} and height={600} for stable viewport calculations
• CSS style={{ width: '100%', height: '100%' }} to maintain responsiveness
• Container div with width: '100%', height: '100%' for proper layout

Benefits

• ✅ Wide images can now be panned smoothly in all directions after zooming
• ✅ Component remains responsive to container size changes via CSS
• ✅ No breaking changes for normal-sized images
• ✅ Minimal code changes with clear documentation

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.