fix: dropdown behind sidebar-bottom
3clyp50 committed
Jan 6, 2026 at 02:44 UTC
0b9235a48c9be6d2f02c2a73387e32fee57fd9c8
2 files changed
+22
-8
webui/components/sidebar/sidebar-store.js
+13
@@ -86,6 +86,19 @@ const model = {
86
isMobile() {
87
return window.innerWidth <= 768;
88
},
89
+
90
+ // Dropdown positioning for quick-actions (fixed position to escape overflow:hidden)
91
+ dropdownStyle: {},
92
+
93
+ updateDropdownPosition(triggerElement) {
94
+ if (!triggerElement) return;
95
+ const rect = triggerElement.getBoundingClientRect();
96
+ this.dropdownStyle = {
97
+ top: `${rect.bottom + 8}px`,
98
+ left: `${rect.left}px`,
99
+ width: `${rect.width}px`
100
+ };
101
+ },
102
};
103
104
export const store = createStore("sidebar", model);
webui/components/sidebar/top-section/quick-actions.html
+9
-8
@@ -4,11 +4,12 @@
4
<script type="module">
5
import { store as chatsStore } from "/components/sidebar/chats/chats-store.js";
6
import { store as projectsStore } from "/components/projects/projects-store.js";
7
+ import { store as sidebarStore } from "/components/sidebar/sidebar-store.js";
8
</script>
9
</head>
10
11
<body>
11
- <div class="wrapper" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false" @keydown.escape.window="dropdownOpen = false">
12
+ <div class="wrapper" x-data="{ dropdownOpen: false }" @click.outside="dropdownOpen = false" @keydown.escape.window="dropdownOpen = false" x-init="$watch('dropdownOpen', v => v && $store.sidebar.updateDropdownPosition($el))">
13
<div id="quick-actions">
14
<!-- Dashboard -->
15
<button class="config-button" id="dashboard" @click="deselectChat()" title="Dashboard">
@@ -38,7 +39,8 @@
39
40
<!-- Dropdown Menu -->
41
<div class="dropdown-menu quick-actions-dropdown"
41
- x-show="dropdownOpen">
42
+ x-show="dropdownOpen"
43
+ :style="$store.sidebar.dropdownStyle">
44
45
<div class="dropdown-header">Navigation</div>
46
@@ -106,6 +108,8 @@
108
.wrapper {
109
position: relative;
110
border-radius: 0.6rem;
111
+ z-index: 100;
112
+ /* Ensure dropdown appears above all sidebar content */
113
}
114
115
/* Icon toolbar layout */
@@ -176,13 +180,10 @@
180
transform: scale(0.95);
181
}
182
179
- /* Dropdown specific positioning */
183
+ /* Dropdown specific positioning - fixed to escape overflow:hidden */
184
.quick-actions-dropdown {
181
- position: absolute;
182
- top: 100%;
183
- left: 0;
184
- right: 0;
185
- margin-top: var(--spacing-xs);
185
+ position: fixed;
186
+ z-index: 9999;
187
}
188
189
/* Unified scrollbar styling for dropdown */