Fix: private chat input placeholder alignment

[ramonlsouza]

What does this PR do?

Fixes the private chat input jumping after text is cleared when a long placeholder is clipped in a narrow sidebar.
It also adds a regression test covering sidebar resizing and repeated type/clear transitions.

before

before.mp4

after

after.mp4

How to test

1. join a meeting with two participants, give the second one a long name
2. open a private chat with the participant
3. increase sidebar width until the full input placeholder fits
4. reduce sidebar width until the placeholder is clipped
5. focus on the input and type something
6. delete the text
7. before the fix, clearing the input caused the textarea to grow and the placeholder/text position to jump vertically - it should not happen after the fix

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 65f28adb-5b6c-41a1-a9a2-78573301f1e9

📥 Commits

Reviewing files that changed from the base of the PR and between 07701d7 and 946e7f8.

📒 Files selected for processing (1)

• bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/styles.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/styles.ts

---

Walkthrough

The private chat textarea no longer receives a content-state prop. Its styling now uses normal wrapping and automatic overflow when populated, while placeholder visibility enables single-line presentation. A Playwright test records textarea metrics while resizing the sidebar, typing, clearing, and verifying height restoration, with failure-only artifact retention configured.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Suggested reviewers: tainan404

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main change: fixing the private chat input jump caused by placeholder behavior.
Description check	✅ Passed	The description accurately describes the textarea fix and regression test in the diff.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In
`@bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/styles.ts`:
- Around line 55-64: Update the populated-state whitespace styling in the chat
message form textarea styles to use `white-space: pre-wrap` instead of `normal`,
preserving consecutive spaces and line breaks; keep the `&:placeholder-shown`
`nowrap` override unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: f2c2163f-7347-4628-999a-0c9b67fb6093

📥 Commits

Reviewing files that changed from the base of the PR and between a9c0cd5 and 07701d7.

📒 Files selected for processing (3)

• bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx
• bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/styles.ts
• bigbluebutton-tests/playwright/chat/privateChatInput.spec.ts

💤 Files with no reviewable changes (1)

• bigbluebutton-html5/imports/ui/components/chat/chat-graphql/chat-message-form/component.tsx

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ Automated tests have passed!

[Tainan404]

Reviewed and tested the code