2298d36bed
- Create Economist SubmissionTracking package correctly: * mainArticle = full blog post content * coverLetter = 216-word SIR— letter * Links to blog post via blogPostId - Archive 'Letter to The Economist' from blog posts (it's the cover letter) - Fix date display on article cards (use published_at) - Target publication already displaying via blue badge Database changes: - Make blogPostId optional in SubmissionTracking model - Economist package ID: 68fa85ae49d4900e7f2ecd83 - Le Monde package ID: 68fa2abd2e6acd5691932150 Next: Enhanced modal with tabs, validation, export 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
42 lines
1.5 KiB
Text
42 lines
1.5 KiB
Text
I need help debugging a CSS scrollbar issue on my website's FAQ modal. Here's the problem:
|
|
|
|
**Issue**: FAQ modal at https://agenticgovernance.digital/faq.html shows only ~8 questions visible, but 28+ questions exist in the DOM. No visible/functional scrollbar to access remaining content.
|
|
|
|
**Current Structure**:
|
|
```html
|
|
<div class="fixed inset-0 z-50"> <!-- backdrop -->
|
|
<div class="bg-white max-w-4xl w-full h-[85vh] flex flex-col">
|
|
<div class="flex-shrink-0">Header (fixed)</div>
|
|
<div class="flex-1 modal-scrollable min-h-0">
|
|
<div class="p-6">
|
|
<!-- Search inputs -->
|
|
<!-- 28+ FAQ items here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**CSS Applied**:
|
|
```css
|
|
.modal-scrollable {
|
|
overflow-y: scroll !important;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #9ca3af #f3f4f6;
|
|
}
|
|
.modal-scrollable::-webkit-scrollbar { width: 10px; background: #f3f4f6; }
|
|
.modal-scrollable::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 5px; }
|
|
```
|
|
|
|
**What I've tried** (all failed):
|
|
- Changed max-h to h on parent
|
|
- Added overflow-hidden to parent
|
|
- Added min-h-0 to flex child
|
|
- Explicit webkit scrollbar styling
|
|
- Various combinations of Tailwind + custom classes
|
|
|
|
**Tech**: Tailwind CSS 3.x, Vanilla JS, Flexbox layout
|
|
|
|
**Question**: What's preventing the scrollbar from working? Is the scrollable div wrapping both the search inputs AND results the problem? Should only the FAQ container be scrollable? What's the correct flexbox + overflow pattern here?
|
|
|
|
Please provide working HTML/CSS structure and explain why my current approach fails.
|