Fix: Chat UI consistency and layout shifts

[seedlord]

Related GitHub Issue

Closes: #5236

Description

This PR fixes several UI inconsistencies and layout shifting issues in the chat view to create a more stable and polished user experience.

The key problems addressed are:

• The "Auto-Approve" bar slightly shifting its position depending on the scroll state.
• Inconsistent spacing between UI elements at the bottom of the chat area.
• The "Scroll to Bottom" button style not matching other standard buttons.
• The visibility of buttons on the right edge of task items depends on the shown message size and is not consistent across different message sizes

Test Procedure

1. In a task with scrollable content, scroll up. Observe that the "Auto-Approve" bar slightly shifts its position depending on the scroll state.
2. The spacing between various UI elements at the bottom of the chat area (e.g., buttons, input field) is inconsistent.
3. The "Scroll to Bottom" button has a different style than the other standard buttons in the application.
4. The buttons on the right edge of task items being hidden too early when viewsize shrinks and initial message of that task is too long/big.

Changes Made

• webview-ui/src/components/chat/ChatView.tsx:

  • Refactored the logic for the bottom action bar to prevent layout shifts.
  • Standardized the "Scroll to Bottom" button to use <VSCodeButton> with appearance="secondary".
  • Unified margins to prevent elements from jumping.

• webview-ui/src/components/chat/ChatTextArea.tsx:

  • Adjusted gap and padding for a more consistent and tighter layout.

• webview-ui/src/components/chat/AutoApproveMenu.tsx:

  • Corrected padding to fix vertical alignment issues.

• webview-ui/src/components/history/TaskItem.tsx:

  • Add min-w-0 class to TaskItem component for better layout handling.

These changes result in a visually stable and consistent chat interface.

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.
• Testing: New and/or updated tests have been added to cover my changes (if applicable).
• Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
• Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

---

Important

Fixes UI inconsistencies and layout shifts in chat interface by standardizing button styles and adjusting spacing in ChatView.tsx, ChatTextArea.tsx, AutoApproveMenu.tsx, and TaskItem.tsx.

• Behavior:
  • Fixes layout shifts in ChatView.tsx by refactoring bottom action bar logic.
  • Standardizes "Scroll to Bottom" button using <VSCodeButton> with appearance="secondary".
  • Ensures consistent spacing and alignment in ChatTextArea.tsx and AutoApproveMenu.tsx.
• Layout:
  • Adjusts gap and padding in ChatTextArea.tsx for tighter layout.
  • Corrects padding in AutoApproveMenu.tsx for vertical alignment.
  • Adds min-w-0 class to TaskItem.tsx for better layout handling.
• Misc:
  • Fixes visibility of buttons on task items in ChatView.tsx based on message size.

^{This description was created by for 0b82c79. You can customize this summary. It will automatically update as commits are pushed.}

[daniel-lxs]

Hey @seedlord, thanks for the contribution!

I didn’t notice anything off with the changes, but could you add some before-and-after screenshots to help visualize the impact a bit better?

Also, did you test the changes across different screen widths? We want to make sure there are no layout overflows on smaller viewports.

Let me know what you think!

[seedlord]

I use Windows 10 with 2 Monitors 1620p & 1440p
this problem occurs for me in 1080p too and fullscreened and windowed too. See below to see what i mean

1. The "Auto-Approve" bar slightly shifting its position (when user sends first message into a blank task or if you scroll up in history)
   

2. Inconsistent spacing between UI elements at the bottom of the chat area.
   I mean the spacing between mode/profiledropdown and the bottom end of the extension webview. Its not the same as the spacing between mode/profiledropdown and the chatinput field.
   It seems its mirrorred above the chatinput field for the chat buttons. This seems to be ok,

3. But still the "Scroll to Bottom" button style not matching other standard buttons (different heights leading to slightly shifting "Auto-Approve" bar) making it looks inconsistent....
   

4. The visibility of buttons on the right edge of task items depends on the shown message size and is not consistent across different message sizes
   

[daniel-lxs]

Thank you @seedlord!

LGTM