Make frontend responsive across mobile, tablet, and desktop viewports

[Copilot]

The frontend layout was not optimized for mobile and narrow viewports, resulting in cramped spacing and text overflow on small screens.

Changes

Layout & Spacing

• Navbar: Switches to vertical layout (flex-col) on mobile with responsive font sizing (text-xl sm:text-2xl)
• Container padding: Progressive scaling (py-6 sm:py-12, px-3 sm:px-4 md:px-6 lg:px-8)
• Card padding: Reduced on mobile (p-4 sm:p-8)

Typography

• All text elements use responsive breakpoints: text-3xl sm:text-4xl, text-xs sm:text-sm, text-base sm:text-lg
• Input fields scale padding and font size for touch-friendly targets

Results Display

• Replaced truncate with break-words on article links to prevent cutoff of long names
• Responsive icon sizing (w-3 h-3 sm:w-4 sm:h-4)

Screenshots

Before (320px narrow)
https://github.com/user-attachments/assets/ddd62de2-2d89-4f8a-ab3b-b1b8c624b566

After (320px narrow)
https://github.com/user-attachments/assets/1fa85b9c-d37a-4510-8980-5333ad606cbc

Mobile (375px)
https://github.com/user-attachments/assets/f8b6fe62-eee5-45c2-9676-5f9f088a1ed2

Tablet (768px)
https://github.com/user-attachments/assets/9caf9063-3565-4780-bda6-e11dd3a30f8c

Desktop (1920px)
https://github.com/user-attachments/assets/e50ce76d-1d0b-4f5e-9787-42448e9f0b9f

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Ensure frontend looks good on mobile, desktop, narrow views</issue_title>
<issue_description>Ensure frontend looks good on mobile, desktop, narrow views</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Ensure frontend looks good on mobile, desktop, narrow views #10

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[michellechang02]

Make sure this passes CI/CD @copilot