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 },
|
_activeSessionId: { state: true },
|
||||||
_newTabOpen: { state: true },
|
_newTabOpen: { state: true },
|
||||||
_newTabTargets: { state: true },
|
_newTabTargets: { state: true },
|
||||||
|
_newTabAnchor: { state: true },
|
||||||
_renamingKey: { state: true },
|
_renamingKey: { state: true },
|
||||||
_cmdMenu: { state: true },
|
_cmdMenu: { state: true },
|
||||||
_cmdSel: { 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.
|
// be started on (General + the caller's projects), fetched on first open.
|
||||||
this._newTabOpen = false;
|
this._newTabOpen = false;
|
||||||
this._newTabTargets = null;
|
this._newTabTargets = null;
|
||||||
|
this._newTabAnchor = null;
|
||||||
// Key of the tab being renamed inline, if any.
|
// Key of the tab being renamed inline, if any.
|
||||||
this._renamingKey = null;
|
this._renamingKey = null;
|
||||||
this._onResizeMove = this._onResizeMove.bind(this);
|
this._onResizeMove = this._onResizeMove.bind(this);
|
||||||
@@ -349,8 +351,12 @@ export class AppCopilot extends I18nMixin(ChatSession) {
|
|||||||
|
|
||||||
// ── The `+` menu ────────────────────────────────────────────────────────────
|
// ── The `+` menu ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
async _toggleNewTab() {
|
async _toggleNewTab(e) {
|
||||||
this._newTabOpen = !this._newTabOpen;
|
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;
|
if (!this._newTabOpen || this._newTabTargets) return;
|
||||||
// General plus the caller's projects — the two things a chat can be *about*.
|
// 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
|
// 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))}
|
${this._tabs.map(tab => this._renderTab(tab))}
|
||||||
<div class="copilot-tab-new">
|
<div class="copilot-tab-new">
|
||||||
<button class="copilot-tab-add" title=${t('chat.new_tab')}
|
<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>
|
<i class="bi bi-plus-lg"></i>
|
||||||
</button>
|
</button>
|
||||||
${this._newTabOpen ? html`
|
${this._newTabOpen ? html`
|
||||||
<div class="copilot-model-overlay" @click=${() => { this._newTabOpen = false; }}></div>
|
<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
|
${this._newTabTargets === null
|
||||||
? html`<div class="copilot-tab-menu-empty">${t('chat.new_tab.loading')}</div>`
|
? html`<div class="copilot-tab-menu-empty">${t('chat.new_tab.loading')}</div>`
|
||||||
: this._newTabTargets.map(target => html`
|
: this._newTabTargets.map(target => html`
|
||||||
|
|||||||
+2
-4
@@ -280,10 +280,8 @@ app-copilot[mode="full"] .copilot-msg {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.copilot-tab-menu {
|
.copilot-tab-menu {
|
||||||
position: absolute;
|
position: fixed;
|
||||||
top: 100%;
|
z-index: 100;
|
||||||
left: 0;
|
|
||||||
z-index: 20;
|
|
||||||
min-width: 180px;
|
min-width: 180px;
|
||||||
max-height: 260px;
|
max-height: 260px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|||||||
Reference in New Issue
Block a user