feat(web): polish mobile UX and responsive layouts across core flows

[affanraza84]

Description

This Pull Request introduces high-fidelity visual and responsive layout adjustments across core flows to resolve layout stretching, overlay conflicts, safe area paddings, and dynamic resize issues on screen widths < 768px (specifically mobile viewports).

The desktop experience was already robust; these refinements guarantee the mobile UX feels equally native, premium, and tactile.

---

Detailed Changes

1. Tactile Bottom Drawer sheets in Exchange Flow

• Behavior on Mobile: Exchange modals (NewExchangeModal and ExchangeDetailModal) now act as native-like bottom drawer sheets rather than centered desktop cards. They slide flush to the bottom, take full width, and scale to comfortable heights, making virtual keyboard interaction natural.
• Responsive classes added: Outer wrapper transitions to items-end sm:items-center p-0 sm:p-4, while inner modal frames utilize rounded-t-3xl sm:rounded-2xl w-full h-[92vh] sm:h-auto max-h-[92vh] sm:max-h-[85vh].

2. Z-Index and Safe Area Adjustments in Community Chat

• Behavior on Mobile: Full-screen chat and library overlays now display with higher z-index priorities to completely cover the mobile navigation bar, avoiding accidental bottom navbar clicks.
• Safe area additions: Replaced hardcoded pb-20 on overlay wrappers with pb-[env(safe-area-inset-bottom,0px)] to keep message composers sitting cleanly above home indicators.

3. Stateful resize listeners in Library Bookshelf

• Behavior on Mobile: Grouping calculations (BOOKS_PER_SHELF) inside the wooden bookshelf are now stateful instead of relying on inline renders of window.innerWidth (which causes hydration mismatches and orientation inconsistencies).
• Cleanup: Removed the secondary duplicate "Load More" button block in Library.jsx to clean up the interface, keeping only the primary Racing Red styled button.

4. Dual-Column Compact Grids in Discover

• Behavior on Mobile: Card lists for NYT Bestsellers, Active Readers, and Mood Search ranked results now render in dynamic dual columns (grid-cols-2) instead of stacking in single, screen-wide vertical block columns.
• Content clamping: Book description fields clamp and hide on mobile viewports using hidden md:line-clamp-2 to prevent excessive card heights.
• Quick Stats redesign: Shifted stats blocks side-by-side (grid-cols-3) with optimized margins and text scaling (text-[9px] sm:text-sm) to preserve clean horizontal alignment.

5. Compacting Reading Sessions modal

• Behavior on Mobile: Paddings in active timer and page progress card elements are reduced on small viewports so that manual page entry controls and reading action buttons sit beautifully above the fold.

---

Modified Files

The following files have been modified:

• 📝 apps/web/src/pages/Exchange.jsx — Exchange modals styling and drawer layout
• 📝 apps/web/src/pages/Community.jsx — Mobile full-screen overlay z-index and safe area paddings
• 📝 apps/web/src/pages/Library.jsx — Stateful window resize hook, dynamic bookshelf grouping, duplicate button removal
• 📝 apps/web/src/pages/Discover.jsx — Dual column layouts, stats row redesign, text clamps
• 📝 apps/web/src/components/Readingsessionmodal.jsx — Compact mobile spacing inside timer overlay

---

Verification & Testing

• Verified dynamic viewport transitions across standard dimensions (iPhone SE, iPhone 12/13/14 Pro, Pixel 7) down to 360px in simulation tools.
• Verified that orientation changes successfully trigger state re-evaluations inside the Library bookshelf groupings.

closed issue #45