fix: make the new-chat + menu visible and clickable
Nightly Build / build (push) Successful in 7m45s
Nightly Build / build (push) Successful in 7m45s
The menu opened but never appeared: it was absolutely positioned inside .copilot-tabs, whose overflow-x: auto clips on both axes, so the dropdown was cut off inside the tab strip. And once visible, every click would have landed on the transparent full-screen overlay (z-index 99) above the menu (z-index 20), closing it instead of choosing an entry. Anchor the menu to the + button with fixed positioning (the same escape the model dropdown gets from living outside any clipping container) and raise it to z-index 100, above the overlay it shares with the other pills.
This commit is contained in:
@@ -64,6 +64,7 @@ export class AppCopilot extends I18nMixin(ChatSession) {
|
||||
_activeSessionId: { state: true },
|
||||
_newTabOpen: { state: true },
|
||||
_newTabTargets: { state: true },
|
||||
_newTabAnchor: { state: true },
|
||||
_renamingKey: { state: true },
|
||||
_cmdMenu: { state: true },
|
||||
_cmdSel: { state: true },
|
||||
@@ -91,6 +92,7 @@ export class AppCopilot extends I18nMixin(ChatSession) {
|
||||
// be started on (General + the caller's projects), fetched on first open.
|
||||
this._newTabOpen = false;
|
||||
this._newTabTargets = null;
|
||||
this._newTabAnchor = null;
|
||||
// Key of the tab being renamed inline, if any.
|
||||
this._renamingKey = null;
|
||||
this._onResizeMove = this._onResizeMove.bind(this);
|
||||
@@ -349,8 +351,12 @@ export class AppCopilot extends I18nMixin(ChatSession) {
|
||||
|
||||
// ── The `+` menu ────────────────────────────────────────────────────────────
|
||||
|
||||
async _toggleNewTab() {
|
||||
async _toggleNewTab(e) {
|
||||
this._newTabOpen = !this._newTabOpen;
|
||||
if (this._newTabOpen && e) {
|
||||
const r = e.currentTarget.getBoundingClientRect();
|
||||
this._newTabAnchor = { top: r.bottom + 4, left: r.left };
|
||||
}
|
||||
if (!this._newTabOpen || this._newTabTargets) return;
|
||||
// General plus the caller's projects — the two things a chat can be *about*.
|
||||
// A project entry starts a second conversation there, with the coordinator
|
||||
@@ -649,12 +655,13 @@ export class AppCopilot extends I18nMixin(ChatSession) {
|
||||
${this._tabs.map(tab => this._renderTab(tab))}
|
||||
<div class="copilot-tab-new">
|
||||
<button class="copilot-tab-add" title=${t('chat.new_tab')}
|
||||
@click=${() => this._toggleNewTab()}>
|
||||
@click=${(e) => this._toggleNewTab(e)}>
|
||||
<i class="bi bi-plus-lg"></i>
|
||||
</button>
|
||||
${this._newTabOpen ? html`
|
||||
<div class="copilot-model-overlay" @click=${() => { this._newTabOpen = false; }}></div>
|
||||
<div class="copilot-tab-menu">
|
||||
<div class="copilot-tab-menu"
|
||||
style=${this._newTabAnchor ? `top:${this._newTabAnchor.top}px;left:${this._newTabAnchor.left}px` : ''}>
|
||||
${this._newTabTargets === null
|
||||
? html`<div class="copilot-tab-menu-empty">${t('chat.new_tab.loading')}</div>`
|
||||
: this._newTabTargets.map(target => html`
|
||||
|
||||
+2
-4
@@ -280,10 +280,8 @@ app-copilot[mode="full"] .copilot-msg {
|
||||
}
|
||||
|
||||
.copilot-tab-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
min-width: 180px;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user