fixed the Bio editor horizontal overflow in profile page

[insanekrishnna]

Addressed Issues

Fixes #548

Changes

• Kept the Bio editor and saved content constrained to the Profile column.
• Added vertical textarea growth and text wrapping.
• Prevented long Bio content from moving adjacent Profile sections.
• Positioned the Bio edit icon at the far-right edge of the Bio heading row, consistent with Socials.

Testing

• Confirmed the Bio edit icon aligns with the Socials edit icons.
• Ran git diff --check successfully.
• Confirmed only frontend/src/Pages/Profile.tsx was changed.

Screenshots/Recordings

Before

Actual behavior
The Bio section expands horizontally when a long bio is entered

bio_issue.mp4

After

The Bio input should grow vertically when necessary.

sol-bio-issue.mp4

Summary by CodeRabbit

• Bug Fixes

  • Improved room participation updates to prevent duplicate participants and keep participant information current.
  • Password reset and login errors now stop follow-up actions and display more accurate error messages.
  • Tournament breadcrumbs now show the tournament’s name when available.

• UI Improvements

  • Improved profile bio editing with automatic resizing and better long-text wrapping.
  • Enhanced light, dark, and high-contrast theme support across forms, comments, matchmaking, badges, charts, and date pickers.
  • Improved theme-toggle sizing and layout.
  • Updated anonymous Q&A styling and send-button placement.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: e27a35f1-9cb6-432d-8311-cbac9ec7f275

📥 Commits

Reviewing files that changed from the base of the PR and between 9f90f9b and a090c51.

📒 Files selected for processing (13)

• backend/routes/rooms.go
• frontend/src/Pages/Authentication.tsx
• frontend/src/Pages/Authentication/forms.tsx
• frontend/src/Pages/Profile.tsx
• frontend/src/Pages/TeamBuilder.tsx
• frontend/src/Pages/TournamentHub.tsx
• frontend/src/components/AnonymousQA.tsx
• frontend/src/components/CommentTree.tsx
• frontend/src/components/Header.tsx
• frontend/src/components/MatchmakingPool.tsx
• frontend/src/components/ThemeToggle.tsx
• frontend/src/context/authContext.tsx
• frontend/src/index.css

Included review availability: Your plan provides up to 1 included review per hour; 0 remain after this review.

---

📝 Walkthrough

Walkthrough

The PR updates room participant writes, password-reset error handling, profile bio layout, breadcrumb labels, and theme-aware presentation across the frontend.

Changes

Application updates

Layer / File(s)	Summary
Atomic room participant replacement backend/routes/rooms.go	JoinRoomHandler replaces matching participants with current data and appends participants when no matching ID exists.
Password reset error propagation frontend/src/context/authContext.tsx, frontend/src/Pages/Authentication/forms.tsx	Authentication errors are re-thrown. Password-reset submission stops when confirmation or login fails.
Profile bio layout and contrast styling frontend/src/Pages/Profile.tsx	The bio area now constrains width, wraps text, auto-resizes during editing, and uses a separate edit header. Profile controls gain contrast-mode styles.
Navigation and theme controls frontend/src/components/Header.tsx, frontend/src/components/ThemeToggle.tsx, frontend/src/Pages/Authentication.tsx	Breadcrumbs can display the tournament name. ThemeToggle accepts a configurable icon size and updated sizing classes.
Theme-aware presentation styling frontend/src/Pages/TeamBuilder.tsx, frontend/src/Pages/TournamentHub.tsx, frontend/src/components/AnonymousQA.tsx, frontend/src/components/CommentTree.tsx, frontend/src/components/MatchmakingPool.tsx, frontend/src/index.css	Updated components use dark, contrast, theme-token, and native date-picker styling. The AnonymousQA send button position also changes.

Priority: ⬆️ High

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

Change: Bug fix · Severity of issue fixed: High

Merge Risk: ⚪ Minimal · up to a090c

The changes appear ready to merge: the Profile Bio remains constrained and wraps safely, while the related room, authentication, navigation, and theme updates have no identified current-head regressions.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The whole-PR diff contains changes unrelated to issue #548. Examples include the MongoDB participant update in backend/routes/rooms.go, password-reset handling in `frontend/src/Pages/Authentication/…	Remove the unrelated changes from this pull request, or move them into separate pull requests. Retain only the changes required for the issue #548 Profile Bio fix and its supporting tests or documentation.
Docstring Coverage	⚠️ Warning	Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 12 files. (1 skipped: …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	Issue #548 requires the Bio width to remain constrained, long text to wrap, the editor to grow vertically, and the Profile layout to avoid horizontal overflow. frontend/src/Pages/Profile.tsx adds `m…
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the primary change: fixing horizontal overflow in the Profile page Bio editor.

Full details: Out of Scope Changes check

Explanation

The whole-PR diff contains changes unrelated to issue #548. Examples include the MongoDB participant update in backend/routes/rooms.go, password-reset handling in frontend/src/Pages/Authentication/forms.tsx, theme changes in frontend/src/components/ThemeToggle.tsx, and presentation or breadcrumb changes across TeamBuilder.tsx, TournamentHub.tsx, AnonymousQA.tsx, CommentTree.tsx, Header.tsx, and other files. These changes do not support the Profile Bio overflow fix.

Full details: Docstring Coverage

Explanation

Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 12 files. (1 skipped: 1 unsupported.)

---

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.}