Compact Manual Approval and Pending Contacts sections to give more
space for Existing Contacts list, which is the primary focus.
Changes to Manual Approval section:
- Convert from full section to single-line compact control
- Replace description text with tooltip icon (hover for info)
- Reduce vertical space by ~70px
Changes to Pending Contacts section:
- Reduce header size from h5 to h6
- Compact empty state (1rem padding vs 3rem)
- Reduce icon size (1.5rem vs 3rem)
- Limit list height to 200px (was 600px)
- Remove "Refresh" text from button (icon only)
Changes to Existing Contacts section:
- Dynamic height: calc(100vh - 400px) with 300px minimum
- Adapts to viewport height automatically
- On mobile: calc(100vh - 450px) for better fit
- More contacts visible without scrolling
Other improvements:
- Initialize Bootstrap tooltips in contacts.js
- Smaller fonts and margins throughout
- Better vertical space distribution
Result: ~150px more space for main contacts list on desktop,
~200px more on mobile. Tooltip provides same info without clutter.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix scrolling issue where contact lists with many items (263/350)
couldn't be scrolled on desktop or mobile devices.
Changes:
- Add max-height: 600px to #existingList and #pendingList
- Enable vertical scrolling with overflow-y: auto
- Add smooth scrolling for mobile with -webkit-overflow-scrolling
- Style custom scrollbar (8px, rounded, gray) for better UX
Tested: Lists now show ~8-10 contact cards at once with scrollbar
appearing when needed. Works with mouse wheel and touch gestures.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
MarekWo