fix: Add vertical resize to VSCodeTextArea internal part

[zhangtony239]

Related GitHub Issue

Closes: #3691

Test Procedure

• Run this version
• Open the prompt settings
• You will find the resizable TextArea components as shown in the demo video

Type of Change

• 🐛 Bug Fix: Non-breaking change that fixes an issue.
• ✨ New Feature: Non-breaking change that adds functionality.
• 💥 Breaking Change: Fix or feature that would cause existing functionality to not work as expected.
• ♻️ Refactor: Code change that neither fixes a bug nor adds a feature.
• 💅 Style: Changes that do not affect the meaning of the code (white-space, formatting, etc.).
• 📚 Documentation: Updates to documentation files.
• ⚙️ Build/CI: Changes to the build process or CI configuration.
• 🧹 Chore: Other changes that don't modify src or test files.

Pre-Submission Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
• Scope: My changes are focused on the linked issue (one major feature/fix per PR).
• Self-Review: I have performed a thorough self-review of my code.
• Code Quality:
  • My code adheres to the project's style guidelines.
  • There are no new linting errors or warnings (npm run lint).
  • All debug code (e.g., console.log) has been removed.
• Testing:
  • New and/or updated tests have been added to cover my changes.
  • All tests pass locally (npm test).
  • The application builds successfully with my changes.
• Branch Hygiene: My branch is up-to-date (rebased) with the main branch.
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Changeset: A changeset has been created using npm run changeset if this PR includes user-facing changes or dependency updates.
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

2025-05-17.221830.mp4

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5cc7619

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[hannesrudolph]

thank you FOR ADDING THIS BACK!

[mrubens]

Do you know how this used to work? I’m still confused about exactly what changed. I don’t think we needed this css before though?

[elianiva]

Do you know how this used to work? I’m still confused about exactly what changed. I don’t think we needed this css before though?

this used to work by passing a prop to the VSCodeTextArea, i forgot to add it back when we reverted from regular textarea (sorry!)

for some reason the css that i used for text area resize-y doesn't get applied on VSCodeTextArea

you need to pass resize="vertical" for it to be vertically resizable

[zhangtony239]

for some reason the css that i used for text area resize-y doesn't get applied on VSCodeTextArea

I think the “some reasons” you said here are due to CSS specificity issues. When working on this PR, both Roo and my multiple rounds of debugging pointed to the same conclusion.

[mrubens]

Sorry, I’m not 100% following. Can we try to get this back to the way it used to work where you only needed to add the resize=vertical for the resizing UI to show up?

[mrubens]

Does #3739 look right?

[mrubens]

I merged #3739, thank you for the help tracking down the issue all!