Fix: Broken Layout in PDF/Image Preview on Zoom & Resize

[zeelsheladiya]

Pull Request

This PR fixes critical responsiveness and layout issues improving UX in the PDF and Image viewers, specifically addressing the bug where zoom controls would disappear when zooming in.

Description

• Refactored Layout Architecture: Switched both PdfViewer and ImageViewer from Flexbox to Absolute Positioning. This anchors the header and footer to the viewport edges, guaranteeing they remain visible regardless of zoom level or content size.
• Fixed Responsiveness: Implemented a native useResizeObserver hook to ensure previews adapt performantly to window resizing.
• Fixed Image Alignment: Replaced CSS transform: scale() with explicit geometry. This solves the issue where zoomed-out images were not centered correctly.
• PDF Improvements: Removed width caps to allow "Fit Width" behavior on large screens and added a toggle between Responsive and Manual Zoom modes.
• Performance: Optimized layout triggers to prevent jank during resizing.

Screenshots/Videos

Before:

before.mp4

After:

after.mp4