From e5e28fb423ef860860bbffbc782594a483308437 Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Tue, 14 Oct 2025 13:06:40 +1300
Subject: [PATCH] fix: modal scrolling and PWA meta tag in FAQ page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**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>
---
 public/faq.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/public/faq.html b/public/faq.html
index 7fe54105..13124a87 100644
--- a/public/faq.html
+++ b/public/faq.html
@@ -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">