From 03dbec65e2f71f525958c39749fea69875dc80f5 Mon Sep 17 00:00:00 2001 From: Beatrix <68532117+abeatrix@users.noreply.github.com> Date: Tue, 17 Dec 2024 08:33:05 -0800 Subject: [PATCH] fix(webviews): update z-index for user menu (#6380) 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 --- 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 {