[BUG] Settings UI - sticky header overlaps text in long panels

[rossdonald]

Problem (one or two sentences)

In the settings web UI, each settings panel has a heading and subheading that is sticky. On longer panels, the sticky header overlaps the text content when scrolling, making content unreadable.

Analysis

The SectionHeader component has the following CSS classes:

Roo-Code/webview-ui/src/components/settings/SectionHeader.tsx

Lines 13 to 15 in 2391a0f

	className={cn(
	"sticky top-0 z-10 text-vscode-sideBar-foreground bg-vscode-sideBar-background px-5 pt-6 pb-4",
	className,

The Problem

1. sticky top-0: Makes the header stick to the top of its nearest scrollable ancestor
2. z-10: Places the header above other content (z-index: 10)
3. bg-vscode-sideBar-background: Gives the header a solid background color
4. px-5 pt-6 pb-4: Adds padding to the header

When content scrolls, it moves under the sticky header. Because the header has:

• A solid background color
• A z-index that places it above content
• No spacing mechanism to prevent overlap

The content that scrolls under the header becomes covered and unreadable.

Affects all settings panels use the SectionHeader component.

Context (who is affected and when)

Users using settings section

Reproduction steps

1. Go to settings
2. Click on Context
3. Scroll down

Expected result

Heading scrolls or does not overlap other text

Actual result

Heading is sticky and overlaps text in panel

Variations tried (optional)

No response

App Version

3.43.0

API Provider (optional)

None

Model Used (optional)

No response

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Problem Analysis:
The SectionHeader component in webview-ui/src/components/settings/SectionHeader.tsx has sticky top-0 CSS classes that cause the header to stick to the top of the scrollable container. When content scrolls, it passes under the sticky header, causing the overlap issue shown in the screenshot.

Proposed Solution:
Remove the sticky top-0 classes from the SectionHeader component. This will make the header scroll naturally with the content, eliminating the overlap issue.

The change is minimal - modifying line 14 in SectionHeader.tsx:

• Before: "sticky top-0 z-10 text-vscode-sideBar-foreground bg-vscode-sideBar-background px-5 pt-6 pb-4"
• After: "z-10 text-vscode-sideBar-foreground bg-vscode-sideBar-background px-5 pt-6 pb-4"

This approach aligns with the expected behavior stated in the issue: "Heading scrolls or does not overlap other text."

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.

[mrubens]

I think this is fixed in #10951