Enable multiline textarea for better readability

[vinayak302004]

Closes #293

Summary

Replaced single-line input with textarea to improve readability while typing messages.

Changes

• Replaced <Input /> with <Textarea /> in debate message box
• Enables multiline typing

Screenshots

• Before

• After

• Video Link

https://drive.google.com/file/d/1D1t4MgKtR2C3fxbGmN0mfTDv5kRZVohc/view?usp=sharing

Note

Enter key behavior is handled in a separate PR #292
Also added enter key and shift + enter key behavior

Summary by CodeRabbit

• Style
  • Replaced the single-line message input with a multi-line textarea in the debate room to improve text entry.
  • Added keyboard behavior: pressing Enter (without Shift) sends the message while Shift+Enter inserts a newline.
  • Existing messaging, recognition, and send flow remain unchanged.

[coderabbitai]

📝 Walkthrough

Walkthrough

The DebateRoom component's user input area was changed from an Input component to a Textarea component and the import updated. An onKeyDown handler was added to the textarea to submit the message when Enter is pressed without Shift.

Changes

Cohort / File(s)	Summary
Input → Textarea & input handling frontend/src/Pages/DebateRoom.tsx	Replaced Input with Textarea, updated import, and added an onKeyDown handler to submit on Enter (without Shift). No other control flow or error handling changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐇 I swapped a box for rows of air,
Enter sends, Shift makes a new line there,
Thoughts stretch out, no horizontal race—
A room for debate, a calmer space.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: replacing Input with Textarea to enable multiline message typing, directly matching the changeset and linked issue objectives.
Linked Issues check	✅ Passed	The PR fulfills issue #293 requirements by replacing Input with Textarea to enable multiline support with automatic text wrapping, while correctly deferring Enter key behavior to PR #292.
Out of Scope Changes check	✅ Passed	The changes are narrowly scoped to replacing Input with Textarea component and adding onKeyDown handler for message submission, staying within the stated objective of enabling multiline readability.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

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 and usage tips.}

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

frontend/src/Pages/DebateRoom.tsx (1)

854-875: ⚠️ Potential issue | 🟡 Minor

Enter key no longer submits the message — potential UX regression until PR #292 lands.

With <Input>, users likely expected Enter to send. With <Textarea>, Enter inserts a newline instead. The PR description notes this is addressed in a separate PR (#292), but if this PR merges first, users lose the ability to submit via keyboard. Consider coordinating the merge order or including a basic onKeyDown handler here (e.g., Enter sends, Shift+Enter for newline).

🧹 Nitpick comments (1)

frontend/src/Pages/DebateRoom.tsx (1)

853-875: Vertical alignment and resize behavior need attention for multiline textarea.

Two issues with the textarea integration:

1. items-center (line 853) vertically centers the Mic and Send buttons relative to the textarea. As the textarea grows with multiple lines, the buttons will float mid-height, which looks awkward. Use items-end to keep them anchored at the bottom.

2. No resize constraint — the user can freely drag-resize the <Textarea>, potentially breaking the fixed-height card layout. Add resize-none to the className (or limit to resize-y with a max-h).

Proposed fix

-              <div className="mt-3 flex gap-2 items-center">
+              <div className="mt-3 flex gap-2 items-end">
                 <Textarea
                   ...
-                  className="flex-1 rounded-md text-sm border border-border bg-input text-foreground placeholder:text-muted-foreground focus:border-orange-400"
+                  className="flex-1 rounded-md text-sm border border-border bg-input text-foreground placeholder:text-muted-foreground focus:border-orange-400 resize-none"
+                  rows={2}
                 />