fix: PDF horizontal scroll overflow in desktop view#21
Conversation
Correct width calculation to use actual p-4 padding (32px) instead of 100px. Add overflow-x-hidden at default zoom and constrain canvas max-width to prevent horizontal scrollbar when not zoomed above 100%. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PoshanP
left a comment
PoshanP
left a comment
There was a problem hiding this comment.
frontend/components/PdfViewer.tsx:331 and frontend/components/
PdfViewer.tsx:341 hide horizontal overflow and apply maxWidth: '100%' when scale <= 1,
but baseWidthRef is computed once and clamped to a minimum of 300px (frontend/
components/PdfViewer.tsx:145, frontend/components/PdfViewer.tsx:159). If the container
shrinks after initial render (chat panel toggle, responsive resize, narrow viewport),
the canvas width can be clamped without re-rendering; height stays fixed
(canvas.style.height), causing non‑uniform scaling or clipped content with no
horizontal scroll.
|
|
||
| const containerHeight = containerRef.current!.clientHeight - 80; // Leave space for controls | ||
| const containerWidth = containerRef.current!.clientWidth - 100; | ||
| const containerWidth = containerRef.current!.clientWidth - 32; // Account for p-4 padding (16px × 2) |
There was a problem hiding this comment.
Aspect Ratio Distortion on Chat Panel Open/Close
The PdfViewer calculates baseWidthRef only once when the PDF loads. When the chat panel opens/closes, the container width changes but the PDF is NOT resized.
With this PR's changes:
- maxWidth: '100%' constrains the canvas width to fit
- But canvas.style.height remains unchanged (based on original width)
- Result: PDF appears horizontally squished/distorted
Scenario:
- PDF loads with chat closed → container ~900px, baseWidth ~700px
- User opens chat (550px default) → container shrinks to ~350px
- Canvas width (700px) constrained to ~320px by maxWidth: 100%
- Canvas height still based on 700px width → aspect ratio broken
Old behavior: Horizontal scrollbar appeared (not ideal but content was undistorted)
New behavior: Content is distorted
🟡 Minor: Mobile/Tablet Not Affected
Mobile and tablet use MobilePdfView (a separate component), which:
- Has a ResizeObserver that recalculates width on container resize
- Doesn't cache baseWidthRef - calculates inline each render
The desktop PdfViewer lacks this resize handling.
🟡 Minor: Unused containerKey Prop
The interface defines containerKey (line 25) with comment "Changes when container size changes", but:
- It's never used in the component
- It's never passed by the parent (chat-new/page.tsx)
This was presumably intended to handle the resize case but was never implemented.
PoshanP
left a comment
PoshanP
left a comment
There was a problem hiding this comment.
Aspect Ratio Distortion on Chat Panel Open/Close
The PdfViewer calculates baseWidthRef only once when the PDF loads. When the chat panel opens/closes, the container width changes but the PDF is NOT resized.
With this PR's changes:
- maxWidth: '100%' constrains the canvas width to fit
- But canvas.style.height remains unchanged (based on original width)
- Result: PDF appears horizontally squished/distorted
Scenario:
- PDF loads with chat closed → container ~900px, baseWidth ~700px
- User opens chat (550px default) → container shrinks to ~350px
- Canvas width (700px) constrained to ~320px by maxWidth: 100%
- Canvas height still based on 700px width → aspect ratio broken
Old behavior: Horizontal scrollbar appeared (not ideal but content was undistorted)
New behavior: Content is distorted
🟡 Minor: Mobile/Tablet Not Affected
Mobile and tablet use MobilePdfView (a separate component), which:
- Has a ResizeObserver that recalculates width on container resize
- Doesn't cache baseWidthRef - calculates inline each render
The desktop PdfViewer lacks this resize handling.
🟡 Minor: Unused containerKey Prop
The interface defines containerKey (line 25) with comment "Changes when container size changes", but:
- It's never used in the component
- It's never passed by the parent (chat-new/page.tsx)
This was presumably intended to handle the resize case but was never implemented.
1 participant
Summary
p-4paddingoverflow-x-hiddenat default zoom (≤100%) to prevent horizontal scrollbarmax-widthto container width when not zoomed above 100%Test plan
🤖 Generated with Claude Code