Polishing the Audit Tool: Icons, PDFs, and Making Things Pretty

Spent today giving my audit tool monorepo some much-needed love. You know how it is - the core functionality works, but then you look at it and realize it needs that extra polish to feel professional.

The Big Visual Upgrade

First thing I tackled was ditching emojis for proper icons. Added @iconify/react and swapped everything over to ionicons. It's amazing how much more polished things look with consistent iconography instead of random emojis scattered around the StageLoading, StageInput, and AI phase components.

While I was at it, I added a clean URL badge to both the teaser and full stages. It shows the stripped-down URL (no https://, no trailing slash) so users can quickly see what site they're looking at. Small detail, but it makes the whole experience feel more intentional.

PDF Hell (But Make It Pretty)

The PDF generation was driving me nuts. You know that feeling when your content gets cut off mid-sentence because of pagination issues? Yeah, that was happening constantly.

I completely overhauled the PDF layout:

• Ditched the 3-item cutoff so all findings actually show up
• Fixed the shouldShowValue logic to stop showing random numbers and redundant text
• Replaced the janky height/overflow approach with min-height + page-break-before for clean page breaks
• Redesigned the cover page with a dark hero section (60%) and light bottom section (40%) - the score ring sits perfectly in the hero area now

The result? Clean, professional-looking reports that actually fit on pages properly.

The Little Things

Fixed some UI annoyances too:

• Added proper px-4 padding so placeholder text isn't smooshed against the input edge
• Added mb-4 spacing between the URL input and the Analyse Site button
• Compacted the cluster pages to reduce orphaned content

It's funny how these tiny spacing issues can make something feel amateurish until you fix them.

What's Next

I'm planning to completely brainstorm and redesign the PDF styling to make it even more professional. The current version works, but I want something that really wows clients when they get their audit reports.

Also need to tackle the page overflow issue once and for all - no more content getting cut mid-section. Thinking about experimenting with subagent-driven-development for this next phase.

Sometimes the best development sessions are the ones where you're just making everything a little bit better, you know?