fix: make the new-chat + menu visible and clickable
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:
2026-08-04 23:01:36 +01:00
parent e5c0f53f75
commit 40663373d4
2 changed files with 12 additions and 7 deletions
+10 -3
View File
@@ -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
View File
@@ -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;