fix(vscode): keep scroll-to-bottom button above sticky accordion headers

[Githubguy132010]

Context

Follow-up to #9056 (review discussion about the scroll-to-bottom button appearing "overlapped" by a Write tool's accordion chevron).

Turned out not to be a layout problem at all — it's a z-index bug. The floating .scroll-to-bottom-button paints correctly over normal content (bash/terminal output, plain text), but Edit/Write/apply_patch tool cards paint over it. The reason: sticky-accordion-header.css sets z-index: 10 on [data-component="sticky-accordion-header"] so the accordion header sticks cleanly when scrolling past, and the button had no z-index, so the sticky header wins the stacking order. Bash output has no sticky header, which is why terminal overlap has always looked right — the button sits on top, content flows under it.

Implementation

One-rule fix in chat-layout.css:

.scroll-to-bottom-button {
  ...
  z-index: 20; /* above the z-index: 10 sticky-accordion-header */
}

No layout shift, no repositioning, no reflow. The button now wins the stacking order against every tool card, so it behaves uniformly whether the scroll-past content is bash output, a text message, or an Edit/Write/apply_patch accordion.

Screenshots

before	after

How to Test

1. Open the Kilo VS Code extension on any session that has Edit/Write/apply_patch tool cards.
2. Scroll up so the floating scroll-to-bottom button appears.
3. Scroll so a tool card's sticky accordion header is near the bottom-right of the viewport (where the button sits).
4. Confirm the button paints fully on top of the accordion chevron and any Created / +N -M badge — same as it already does over bash output.
5. Click the button — still resumes auto-scroll.

Get in Touch

🤖 Generated with Claude Code

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[kilo-code-bot]

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 files)

• packages/kilo-vscode/webview-ui/src/styles/chat-layout.css

---

_{Reviewed by gpt-5.4-20260305 · 348,704 tokens}

[marius-kilocode]

@Githubguy132010 would you be so kind and add some screenshots for UI changes? It's quite hard to review so many PR's and screenshots really help to understand what changed in the UI. Thanks

[Githubguy132010]

@Githubguy132010 would you be so kind and add some screenshots for UI changes? It's quite hard to review so many PR's and screenshots really help to understand what changed in the UI. Thanks

I'll do that later. Expect changes later today.

[Githubguy132010]

Can't repro on main anymore. Likely already fixed. Closing.