Skip to content

Commit

Permalink
fix(webviews): update z-index for user menu (#6380)
Browse files Browse the repository at this point in the history
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

<!-- Required. See
https://docs-legacy.sourcegraph.com/dev/background-information/testing_principles.
-->

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

<!-- OPTIONAL; info at
https://www.notion.so/sourcegraph/Writing-a-changelog-entry-dd997f411d524caabf0d8d38a24a878c
-->
  • Loading branch information
abeatrix authored Dec 17, 2024
1 parent c61ffb9 commit 03dbec6
Showing 1 changed file with 1 addition and 1 deletion.
2 changes: 1 addition & 1 deletion vscode/webviews/tabs/TabsBar.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
container-type: inline-size;
container-name: tabs-container;
isolation: isolate;
z-index: 1;
z-index: 2;
}

.tabs-container {
Expand Down

0 comments on commit 03dbec6

Please sign in to comment.