Bug Description

On the "Add your details" onboarding page, the Bio textarea has two issues:

1. Layout Issue: When the textarea is resized (by dragging the bottom-right corner), the footer buttons overlay the bottom portion of the textarea content, making text invisible and uneditable.

2. Missing Character Limit: The Bio field has no character limit or counter, allowing users to enter unlimited text which can cause:

   • Database issues if there's a backend limit
   • Poor UX (users don't know the limit)
   • Performance issues with very long text

Steps to Reproduce

1. Go to the onboarding flow (first-time user setup)
2. Navigate to "Add your details" page
3. Type or paste a long text in the Bio field (e.g., Lorem Ipsum paragraph)
4. Drag the bottom-right corner of the Bio textarea to resize it larger
5. Observe that the bottom portion of text is hidden under the Continue/Back buttons
6. Notice there's no character limit or counter

Expected Behavior

• The Bio textarea should have a maximum height with internal scrolling
• The Bio field should have a character limit (e.g., 256 characters)
• A character counter should show remaining characters (e.g., "45/256")
• Footer buttons should never overlay textarea content

Actual Behavior

• Textarea can be resized infinitely
• No character limit exists
• No character counter visible
• Footer buttons overlay textarea content when resized
• Users don't know how long their bio can be

Screenshots

Problem 1 - brave: Buttons overlay textarea with no text limit

Problem 2 - chrome: no proper gap between Bio textarea and buttons

Proposed Fix

1. Add max-h-[200px] resize-y overflow-y-auto to limit textarea height
2. Add maxLength={256} to enforce character limit
3. Add character counter component showing "X/256 characters"
4. Add proper spacing (mb-8) between textarea and footer

Environment

• Browsers tested: Chrome, Brave (100% zoom)
• Device: Desktop