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:
parent
f724d34f78
commit
e5e28fb423
1 changed files with 9 additions and 6 deletions
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue