From ad1b169e7c5785355fb14df570ae46e9f7038a81 Mon Sep 17 00:00:00 2001 From: Release Bot <107104610+sourcegraph-release-bot@users.noreply.github.com> Date: Tue, 17 Dec 2024 08:41:47 -0800 Subject: [PATCH] [Backport vscode-v1.52.x] fix(webviews): update z-index for user menu (#6393) CLOSE https://linear.app/sourcegraph/issue/CODY-4533/layout-bug-in-prompts-tab-and-new-user-menu-ui ![image](https://github.com/user-attachments/assets/a7d5fe5c-2635-47f1-8ffa-00c781287f62) Fix UserMenu dropdown appearing underneath PromptList search box The UserMenu dropdown and PromptList search box were competing for z-index positioning since both had z-index: 1. Because PromptList was rendered after UserMenu in the DOM order, it would appear on top of the UserMenu dropdown when opened. This fix increases UserMenu's z-index to 2, ensuring it properly stacks above the PromptList search box while maintaining both components' ability to overlay their respective underlying content. Changes - Updated UserMenu dropdown z-index from 1 to 2 to create proper stacking hierarchy - Maintains existing stacking contexts for both components ## Test plan After ![image](https://github.com/user-attachments/assets/9341c4cf-b90c-4e28-806e-5c6ce15d69ab) 1. Open Cody sidebar 2. Navigate to Prompts tab 3. Click on user avatar to open UserMenu dropdown 4. Verify UserMenu dropdown appears above the PromptList search box 5. Verify PromptList search box still properly overlays its content when scrolling 6. Verify UserMenu dropdown properly overlays all other UI elements ## Changelog
Backport 03dbec65e2f71f525958c39749fea69875dc80f5 from #6380 Co-authored-by: Beatrix <68532117+abeatrix@users.noreply.github.com> --- vscode/webviews/tabs/TabsBar.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vscode/webviews/tabs/TabsBar.module.css b/vscode/webviews/tabs/TabsBar.module.css index 1ee3aef64bc0..1ab40c3885e0 100644 --- a/vscode/webviews/tabs/TabsBar.module.css +++ b/vscode/webviews/tabs/TabsBar.module.css @@ -11,7 +11,7 @@ container-type: inline-size; container-name: tabs-container; isolation: isolate; - z-index: 1; + z-index: 2; } .tabs-container {