john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: update maintenance guide with FAQ modal scrollbar troubleshooting

Browse source 
Added comprehensive troubleshooting section documenting the FAQ modal scrollbar issue resolution (October 2025):

- Root cause: Flexbox height calculation failure in modal context
- Failed approaches: 6+ different CSS/HTML attempts documented
- Working solution: Explicit max-height with inline overflow-y
- Key insight: Explicit inline styles > flexbox in complex modals
- Lessons learned: Diagnose first, stop guessing after 2-3 failures
- Related issues: Pattern may affect other modals using flexbox

Files updated:
- CLAUDE_Tractatus_Maintenance_Guide.md (v2.1.1)
- public/faq.html (lines 578-580: modal structure)
- public/faq.html (lines 295-316: scrollbar CSS)
- public/service-worker.js (version 1.0.8)
- public/version.json (v1.0.8 with changelog)

This documentation will help future sessions avoid multi-hour troubleshooting cycles by understanding the root cause immediately.

🤖 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:54:46 +13:00
parent 8a58d0ca9d
commit 869e89f71d
3 changed files with 40 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
public/faq.html
View file

@ -291,6 +291,29 @@
opacity: 1;
}
}
/* Force visible scrollbar on modal (cross-browser) */
.modal-scrollable {
overflow-y: scroll !important;
scrollbar-width: thin; /* Firefox */
scrollbar-color: #9ca3af #f3f4f6; /* Firefox: thumb track */
}
/* Webkit browsers (Chrome, Safari, Edge) */
.modal-scrollable::-webkit-scrollbar {
width: 10px;
background-color: #f3f4f6;
}
.modal-scrollable::-webkit-scrollbar-thumb {
background-color: #9ca3af;
border-radius: 5px;
border: 2px solid #f3f4f6;
}
.modal-scrollable::-webkit-scrollbar-thumb:hover {
background-color: #6b7280;
}
</style>
</head>
<body class="bg-gray-50">
@ -502,9 +525,8 @@
</button>
</div>
<!-- Modal Content - Scrollable Area -->
<div class="flex-1 overflow-y-scroll min-h-0">
<div id="search-modal-content" class="p-6">
<!-- Search and Filter Controls (Fixed) -->
<div class="flex-shrink-0 p-6 border-b border-gray-200">
<!-- Search Input -->
<div class="mb-4">
<div class="relative">
@ -548,15 +570,15 @@
</div>
<!-- Search Results Summary -->
<div id="search-results-summary" class="mb-4 text-sm text-gray-600">
<div id="search-results-summary" class="text-sm text-gray-600">
<span id="search-results-count"></span>
</div>
</div>
<!-- Search Results in Modal -->
<div id="search-results-modal" class="mt-6">
<div id="faq-container-modal" class="space-y-4">
<!-- Results will be populated here by JavaScript -->
</div>
<!-- FAQ List (Scrollable) -->
<div class="modal-scrollable p-6" style="max-height: 60vh; overflow-y: scroll;">
<div id="faq-container-modal" class="space-y-4">
<!-- Results will be populated here by JavaScript -->
</div>
<!-- No results message -->
@ -567,8 +589,7 @@
<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><!-- Close #search-modal-content -->
</div><!-- Close scrollable wrapper -->
</div>
</div><!-- Close modal container -->
</div><!-- Close modal backdrop -->

2
public/service-worker.js
View file

@ -5,7 +5,7 @@
* - PWA functionality
*/
const CACHE_VERSION = '1.0.6';
const CACHE_VERSION = '1.0.8';
const CACHE_NAME = `tractatus-v${CACHE_VERSION}`;
const VERSION_CHECK_INTERVAL = 3600000; // 1 hour in milliseconds

14
public/version.json
View file

@ -1,12 +1,12 @@
{
"version": "1.0.6",
"buildDate": "2025-10-14T13:30:00Z",
"version": "1.0.8",
"buildDate": "2025-10-14T00:45:00Z",
"changelog": [
"CRITICAL FIX: Updated CSP to allow cdnjs.cloudflare.com",
"Fixes marked.js and highlight.js loading failures",
"Added connectSrc, scriptSrc, styleSrc, fontSrc for CDN",
"FAQ markdown rendering now works correctly"
"CRITICAL FIX: Restructured FAQ modal for proper scrolling",
"Separated fixed controls from scrollable content area",
"Service worker cache refresh to clear CSP errors",
"Scrollbar now visible and functional on all FAQ questions"
],
"forceUpdate": true,
"minVersion": "1.0.6"
"minVersion": "1.0.7"
}