[ENHANCEMENT]: Oversized Icons inside the Book Notes Popup #591

@devanshi14malhotra I would like to work on this under GSSOC'26. Please assign it to me.

Current Behavior

When a user clicks on a book to view its custom-generated summary or bookseller note, a glassmorphism modal pops up. Inside this modal, the interactive action icons (such as the Like/Heart, Info, and other action buttons) are disproportionately scaled. Instead of blending seamlessly into the UI, they appear overly large compared to the surrounding typography, which disrupts the visual hierarchy and causes them to look pixelated or visually aggressive.

Suggested Improvement

Scale down the action icons inside the book detail popup component to a standard, visually balanced size (e.g., matching the typographic line-height or restricting them to standard interface bounds like 18px to 24px). Additionally, ensure that while the visual asset shrinks, the underlying interactive element maintains an adequate, invisible padding footprint to keep the buttons easily clickable on touch devices.

Benefits

• Refined Visual Hierarchy: Aligning the icon sizes with the text ensures that the user's primary focus remains on reading the AI-generated note rather than being distracted by giant utility buttons.

• Aesthetic Consistency: Restores the immersive, clean, "cozy terminal/bookstore" aesthetic that defines the BiblioDrift project.

• Enhanced Polish: Fixes any stretching or pixelation that occurs when small SVG or icon assets are forced into large display boxes, giving the UI a production-ready finish.

Possible Implementation

No response