Bug Bash - PDF Preview

[jennifer-luo-dev]

Assigned To: Megan, Hande

Overview

The PDF preview feature has been implemented and successfully renders reports using real data. However, several formatting, usability, and presentation issues remain that prevent the preview from accurately reflecting the final exported PDF.

This ticket focuses on polishing the PDF preview experience by fixing layout issues, improving chart readability, and aligning the preview generation flow with the intended user interaction (“Export as PDF”). The end result should be a preview that is visually correct, intuitive to access, and ready for PDF export without further structural changes.

Task

In this sprint, you will address a set of bugs and UX issues related to the PDF preview page (/preview) and chart rendering. These fixes should ensure the preview matches design expectations and improves readability for end users. Figma:

Task Breakdown

Fix the PDF preview and chart presentation according to the Figma design by:

• Reformatting the PDF preview layout to better resemble a final report
• Updating the preview generation flow so the preview is generated when the user selects “Export as PDF”, rather than having to manually navigate to /preview
• Ensuring the report name is correctly displayed on the report and editable/entered on the Report Page
• Show table names on the report and ensure they are correctly labeled and human-readable
• Improving chart readability by increasing:

X-axis and Y-axis title font sizes
Chart label font sizes (axis ticks, legends, data labels) - test to make sure that text does not bleed with longer labels(show the first few characters followed by '...' if unable to fit)

Things to Keep in Mind

• Avoid duplicating logic — reuse existing chart utilities and preview components
• Ensure all changes scale well for reports with many charts
• Test changes using multiple report configurations to confirm consistency

Resources

• PDF Preview Page: src/app/preview/page.tsx
• Chart generation utility: generateChart()
• Existing report data fetching logic: src/app/api/reports/in-progress/route.ts
• Figma design