059dd43b72
Phase 0 Complete (QW-1 through QW-8): ✅ Enhanced input validation with HTML sanitization ✅ Form rate limiting (5 req/min on all submission endpoints) ✅ Modern CSRF protection (SameSite cookies + double-submit pattern) ✅ Security audit logging (CSRF violations captured) ✅ Applied to all public form endpoints: - /api/cases/submit (case studies) - /api/media/inquiries (media inquiries) - /api/newsletter/subscribe (newsletter) New Middleware: - csrf-protection.middleware.js (replaces deprecated csurf package) - Enhanced input-validation.middleware.js applied to all forms Security Features Active: - Security headers (CSP, HSTS, X-Frame-Options, etc.) - Rate limiting (100 req/15min public, 5 req/min forms) - CSRF protection (double-submit cookie pattern) - HTML sanitization (XSS prevention) - Response sanitization (hide stack traces) - Security event logging Implements: inst_041, inst_042, inst_043, inst_044, inst_045, inst_046 Refs: docs/plans/security-implementation-roadmap.md Phase 0
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.
|