[BUG] PDF Watermark Preview is not responsive on mobile devices

[pragya-manna]

🐛 Bug Description

When viewing the PDF watermark preview on mobile devices, the PDF canvas exceeds the screen width and does not scale properly. As a result, the preview is partially cut off and users cannot view the entire page. The issue appears to be caused by a fixed PDF render scale and lack of responsive canvas sizing.

🔄 Steps to Reproduce

1. Go to the PDF Watermark Tool page.
2. Upload any PDF file.
3. Scroll to the Live Preview section on a mobile device.
4. Observe the rendered PDF preview.

Expected Outcome: The PDF preview should automatically scale to fit the device screen and remain fully visible in mobile.

Actual Outcome: The PDF preview overflows the viewport, causing part of the page to be cut off and difficult to view in mobile.

✅ Expected Behavior

The PDF preview canvas should be responsive and adapt to different screen sizes, ensuring the entire page remains visible on mobile devices without overflow.

📸 Screenshots

🛠️ Possible Fix

• Make the canvas responsive using max-width: 100% and height: auto.
• Dynamically calculate the PDF render scale based on the available screen width.
• Constrain the preview container to the viewport width on smaller devices.

📌 System Information

• Operating System: Android
• Browser/Device: Chrome Mobile

💡 Additional Context (if any)

The issue is not visible on desktop browsers and appears only on smaller screen sizes. The PDF is rendered using PDF.js with a fixed scale value.

🏆 Are you contributing under an open-source program?

GSSoC 2026.

[pragya-manna]

I am a gssoc 2026 contributor and would like to work on this issue.