fix(web): keep the sidebar resize handle above the chat composer background - #1766
Conversation
🦋 Changeset detectedLatest commit: 82e7abe The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 590b4984dc
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| z-index: var(--z-sticky); | ||
| /* above pane-level sticky chrome (chat dock, headers at --z-sticky): its 2px | ||
| overhang into the neighbour pane must stay visible and grabbable */ | ||
| z-index: var(--z-dropdown); |
There was a problem hiding this comment.
With this handle now using --z-dropdown, the canonical design-system table still documents ResizeHandle as --z-sticky (apps/kimi-web/src/views/DesignSystemView.vue:1452), even though apps/kimi-web/AGENTS.md requires modified UI to match DesignSystemView.vue. That stale spec can mislead future UI changes back to the old stacking layer and reintroduce this regression, so please update the design-system entry alongside the component change.
Useful? React with 👍 / 👎.
commit: |
1 participant
Related Issue
None — this is a clear, reproducible bug fix, so the problem is explained below per CONTRIBUTING.
Problem
In the web UI, hovering the sidebar resize strip only shows a sliver of the blue highlight: the chat composer's dock paints its opaque background over the half of the 4px strip that overhangs the conversation column, so the strip looks cut off and is hard to grab.
Root cause: both the composer dock (
z-index: var(--z-sticky)= 100) and the resize handle (also 100) compete in the same stacking context, and the dock comes later in DOM order, so its background paints over the handle.What changed
Raise the resize handle's
z-indexfrom--z-sticky(100) to--z-dropdown(200), so the full strip stays visible and draggable above pane-level sticky chrome (the composer dock and in-pane sticky headers at 100) while remaining under tooltips, overlays, and dropdown menus. One-line change inResizeHandle.vueplus an explanatory comment.Verified in a live browser against a local server: with a session open and the composer dock spanning the conversation column, the handle is the topmost element at its conversation-side half and the full blue bar renders on hover.
typecheck,check:style, andoxlintpass for the web app.Checklist
gen-changesetsskill, or this PR needs no changeset.gen-docsskill, or this PR needs no doc update. (Bug fix restoring intended behavior; no documented behavior changes.)