Fix Settings header visibility with semi-transparent background

[roomote]

Description

Fixes the Settings header visibility issue where the title text became unreadable when content scrolled beneath it.

Problem

The Settings page header lacked a background, causing the "Settings" title and action buttons to become difficult or impossible to read when scrollable content (like the MCP Servers list) passed underneath them.

Solution

Added a semi-transparent background with backdrop blur to the TabHeader component:

• 85% opaque background using the editor background color for solid visibility
• Backdrop blur effect for a polished, modern appearance that maintains visual hierarchy
• Text remains fully readable while content scrolls beneath

Changes

• Modified webview-ui/src/components/common/Tab.tsx:
  • Added backdrop-blur-sm class for subtle blur effect
  • Added semi-transparent background using CSS color-mix() function
  • Maintains existing padding, border, and layout

Visual Impact

The Settings header now has a frosted glass effect that:

• ✅ Keeps the title and buttons readable at all times
• ✅ Doesn't interfere with content below
• ✅ Follows modern UI patterns seen in macOS, iOS, and other design systems
• ✅ Maintains consistency with VSCode's theme system

Testing

• Tested with light and dark themes
• Verified the header remains readable when content scrolls beneath
• Confirmed no visual regressions in other parts of the UI

---

cc @taltas - Please review when you have a chance!

---

Important

Fixes Settings header visibility by adding a semi-transparent background and blur effect to TabHeader in Tab.tsx.

• Behavior:
  • Fixes Settings header visibility by adding a semi-transparent background and backdrop blur to TabHeader in Tab.tsx.
  • Ensures text readability when content scrolls beneath.
• Visuals:
  • Uses backdrop-blur-sm class and color-mix() for background.
  • Mimics modern UI patterns with a frosted glass effect.
• Testing:
  • Verified with light and dark themes.
  • Confirmed no visual regressions in other UI parts.

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

[roomote]

Rooviewer   See task on Roo Cloud

Review complete. No issues found.

The implementation correctly adds a semi-transparent background with backdrop blur to the TabHeader component. The CSS color-mix() function is well-supported in VSCode webviews, and the --vscode-editor-background variable is properly defined in the theme.

_{Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.}