fix(ui): prevent bio textarea overlap and add character limit (#26903)

[shoaibansari5398]

What does this PR do?

This PR fixes a UI bug where the Bio textarea on the onboarding page could be resized infinitely, causing it to overlap with the footer buttons. It also adds a missing character limit to the bio field to prevent potential database or UI issues with excessively long text.

Frontend:
Added maxHeight="200px" to the
Editor
component to constrain vertical resizing.
Added a character counter (e.g., 0/256) below the bio field.
implemented a 256 character limit enforcement in the setText handler.
Refactored
UserProfile
to use watch("bio") for reliable character counting.
Fixes #26903

Visual Demo (For contributors especially)

The bio field is now constrained, does not overlap the footer, and shows a character counter

Video Demo (if applicable):

• Show screen recordings of the issue or feature.
• Demonstrate how to reproduce the issue, the behavior before and after the change.

Image Demo (if applicable):

• Add side-by-side screenshots of the original and updated change.
• Highlight any significant change(s).

Mandatory Tasks (DO NOT REMOVE)

How should this be tested?

Login or Sign up locally (e.g., as a new user).
Navigate to the onboarding flow: http://localhost:3000/getting-started/user-profile.
Verify UI:
Try to resize the Bio textarea. It should stop resizing at 200px height and show a scrollbar for content.
Verify it does not overlap with the "Finish setup" buttons at the bottom.
Verify Logic:
Type in the Bio field and observe the character counter updating (e.g., 5/256).
Copy-paste a text longer than 256 characters (e.g., Lorem Ipsum).
Verify the text is truncated to 256 characters and the value is updated correctly.

Checklist

Checked all the pointers

[CLAassistant]

All committers have signed the CLA.

[cubic-dev-ai]

1 issue found across 2 files

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them.


<file name="apps/web/components/getting-started/steps-views/UserProfile.tsx">

<violation number="1" location="apps/web/components/getting-started/steps-views/UserProfile.tsx:161">
P2: Bio length guard discards inputs over 256 instead of truncating, leaving form state/counter stale and potentially saving an outdated bio</violation>
</file>

---

Since this is your first cubic review, here's how it works:

• cubic automatically reviews your code and comments on bugs and improvements
• Teach cubic by replying to its comments. cubic learns from your replies and gets better over time
• Ask questions if you need clarification on any suggestion

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}