fix: modal scrolling and PWA meta tag in FAQ page

**Modal Scrolling Fix** (addresses user issue with 8-question visibility limit):
- Restructured modal layout to use dedicated scrollable wrapper
- Changed overflow-y-auto to overflow-y-scroll for always-visible scrollbar
- Separated scrollable container from content padding wrapper
- Modal now properly scrolls through all 28+ FAQ items

**PWA Meta Tag Update**:
- Added standard mobile-web-app-capable meta tag
- Replaced deprecated apple-mobile-web-app-capable (kept for compatibility)
- Resolves browser deprecation warning

Technical Details:
- New structure: flex-1 scrollable wrapper > padded content div
- Ensures min-h-0 works correctly with flexbox for scroll overflow
- Location: public/faq.html:505-570

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow 2025-10-14 13:06:40 +13:00
parent f724d34f78
commit e5e28fb423

View file

@ -12,6 +12,7 @@
<!-- PWA Meta Tags -->
<meta name="theme-color" content="#3b82f6">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Tractatus">
@ -488,7 +489,7 @@
<!-- Search Modal -->
<div id="search-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col overflow-hidden">
<div class="bg-white rounded-lg shadow-2xl max-w-4xl w-full h-[85vh] flex flex-col">
<!-- Modal Header -->
<div class="flex items-center justify-between p-6 border-b border-gray-200 flex-shrink-0">
<h2 class="text-2xl font-bold text-gray-900">Search FAQ</h2>
@ -501,8 +502,9 @@
</button>
</div>
<!-- Modal Content -->
<div id="search-modal-content" class="flex-1 overflow-y-auto p-6 min-h-0">
<!-- Modal Content - Scrollable Area -->
<div class="flex-1 overflow-y-scroll min-h-0">
<div id="search-modal-content" class="p-6">
<!-- Search Input -->
<div class="mb-4">
<div class="relative">
@ -565,9 +567,10 @@
<h3 class="mt-2 text-lg font-medium text-gray-900">No questions found</h3>
<p class="mt-1 text-sm text-gray-500">Try adjusting your search or filter</p>
</div>
</div>
</div>
</div>
</div><!-- Close #search-modal-content -->
</div><!-- Close scrollable wrapper -->
</div><!-- Close modal container -->
</div><!-- Close modal backdrop -->
<!-- Search Tips Modal -->
<div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">