Fix — Comment Overflow + Reply Threading
What Was Fixed
CSS Overflow
- Comment entries and form elements were bleeding beyond their container boundaries
- Added
overflow: hidden; box-sizing: border-box to .comment-entry
- Added
min-width: 0 on flex children to prevent textarea overflow
- Added
flex-shrink: 0 on buttons to prevent button collapse
- Comment form now properly contained within section boundaries
What Was Added
One-Level Reply Threading
- Reply button on every comment — click to open inline reply form
- One level only: users can reply to comments but not to replies (no infinite nesting)
- Threaded display: replies indented with left border (
border-left: 2px solid #333)
- Firestore subcollection: replies stored at
comments/{section}/entries/{commentId}/replies/{replyId}
- Security rules updated:
allow read, create: if true on replies subcollection
- Reply rendering: each comment fetches its replies, renders inline below the comment
Firestore Rules Update
Before
match /comments/{section}/entries/{entry} — read, create, update (name-verified)
match /{document=**} — deny all
After
match /comments/{section}/entries/{entry} — read, create, update (name-verified)
match /comments/{section}/entries/{entry}/replies/{reply} — read, create
match /{document=**} — deny all
Files Changed
index.html — CSS overflow fixes, reply CSS, complete comment engine rewrite with reply support
- Firestore security rules — deployed via Firebase Rules API
Review
Verified
- Comment form no longer overflows container
- Reply creation tested against Firestore API — 200 OK
- Security rules deployed and released to
cloud.firestore/bahalaka-website
- Deployed to Cloudflare Pages — live at bahalaka.com