Skip to content

fix: PDF horizontal scroll overflow in desktop view #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PoshanP wants to merge 1 commit into
base: vercel_deployment
Choose a base branch
from
Open

fix: PDF horizontal scroll overflow in desktop view #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions frontend/components/PdfViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export function PdfViewer({
const pageAspectRatio = viewport.width / viewport.height;

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)

@PoshanP PoshanP Jan 14, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:

  1. PDF loads with chat closed → container ~900px, baseWidth ~700px
  2. User opens chat (550px default) → container shrinks to ~350px
  3. Canvas width (700px) constrained to ~320px by maxWidth: 100%
  4. 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.


// Calculate width that would make 80% of page height visible
const targetHeight = containerHeight * 0.8;
Expand Down Expand Up @@ -328,7 +328,7 @@ export function PdfViewer({
{/* Scrollable PDF container with all pages */}
<div
ref={containerRef}
className="flex-1 overflow-auto scroll-smooth"
className={`flex-1 overflow-y-auto scroll-smooth ${scale <= 1 ? 'overflow-x-hidden' : 'overflow-x-auto'}`}
>
<div className="flex flex-col items-center gap-4 p-4 pb-16">
{Array.from({ length: totalPages }, (_, i) => i + 1).map((pageNum) => (
Expand All @@ -338,6 +338,7 @@ export function PdfViewer({
if (el) canvasRefs.current.set(pageNum, el);
}}
className="shadow-lg bg-white"
style={scale <= 1 ? { maxWidth: '100%' } : undefined}
/>
))}
</div>
Expand Down