Fix: mobile responsiveness issues on TanStack DB page

[y2-znt]

Fixes #505

This PR addresses an issue where the TanStack DB documentation layout overflowed horizontally on mobile devices.

Problem

The TanStack DB documentation page was not responsive on mobile devices, causing horizontal overflow and unwanted scrolling on small viewports.

Changes Made

• Fixed paragraph width constraints: Replaced fixed w-3xl class with responsive max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px] to prevent text overflow on mobile
• Improved grid layout: Changed grid from grid-cols-2 to grid-cols-1 sm:grid-cols-2 to stack items vertically on mobile
• Enhanced spacing: Updated gap classes to gap-x-4 sm:gap-x-10 lg:gap-x-12 for better mobile spacing
• Added responsive container width: Applied max-w-[90vw] sm:max-w-[500px] lg:max-w-[650px] to the grid container

Before

After

Testing

• ✅ Tested with Chrome DevTools mobile simulation
• ✅ Confirmed no horizontal scrolling on mobile viewports
• ✅ Maintained desktop layout integrity

The page now properly adapts to small viewports while preserving the existing desktop experience.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	bb2ae79
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69128357c92d6800089bf1a4
😎 Deploy Preview	https://deploy-preview-506--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 20 (🟢 up 3 from production) Accessibility: 83 (no change from production) Best Practices: 83 (no change from production) SEO: 98 (no change from production) PWA: 70 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[theotruvelot]

LGTM