diff --git a/cortex/static/app.js b/cortex/static/app.js index 7ede668..571821e 100644 --- a/cortex/static/app.js +++ b/cortex/static/app.js @@ -516,23 +516,27 @@ editBtn.textContent = '✎'; editBtn.title = 'Rename session'; - // ── Name label ────────────────────────────────────────── + // ── Body: name (top) + meta (below) ───────────────────── + const bodyEl = document.createElement('div'); + bodyEl.className = 'session-body'; + const labelEl = document.createElement('span'); labelEl.className = 'session-id'; labelEl.textContent = displayName; - // ── Meta (right of name, before delete) ───────────────── const metaEl = document.createElement('span'); metaEl.className = 'session-meta'; metaEl.textContent = `${s.message_count} msgs · ${timeAgo(s.updated)}`; + bodyEl.append(labelEl, metaEl); + // ── Delete button (far right) ──────────────────────────── const delBtn = document.createElement('button'); delBtn.className = 'session-delete-btn'; - delBtn.textContent = '×'; delBtn.title = 'Delete session'; + delBtn.textContent = '×'; - item.append(editBtn, labelEl, metaEl, delBtn); + item.append(editBtn, bodyEl, delBtn); // Click anywhere on the row (not a button) → resume item.addEventListener('click', (e) => { @@ -548,9 +552,8 @@ input.value = s.name || ''; input.placeholder = s.session_id; - // Hide name, meta, delete — input takes their space - labelEl.hidden = true; - metaEl.hidden = true; + // Swap body + delete for the input + bodyEl.hidden = true; delBtn.hidden = true; editBtn.textContent = '✓'; @@ -578,8 +581,7 @@ function cancelEdit() { input.remove(); - labelEl.hidden = false; - metaEl.hidden = false; + bodyEl.hidden = false; delBtn.hidden = false; editBtn.textContent = '✎'; editBtn.title = 'Rename session'; diff --git a/cortex/static/style.css b/cortex/static/style.css index 39a372b..37e478f 100644 --- a/cortex/static/style.css +++ b/cortex/static/style.css @@ -278,8 +278,8 @@ position: absolute; top: calc(100% + 4px); right: 12px; - width: min(300px, calc(100vw - 24px)); - max-height: 340px; + width: min(420px, calc(100vw - 24px)); + max-height: 400px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); @@ -291,19 +291,26 @@ #sessions-panel.open { display: block; } .session-item { - padding: 10px 14px; + padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--border); display: flex; - justify-content: space-between; align-items: center; - gap: 8px; + gap: 6px; } .session-item:last-child { border-bottom: none; } .session-item:hover { background: var(--bg); } .session-item.new { color: var(--accent); justify-content: center; } + .session-body { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 2px; + } + .session-delete-btn { background: none; border: none; @@ -380,11 +387,9 @@ } .session-meta { - font-size: 0.78rem; + font-size: 0.75rem; color: var(--muted); white-space: nowrap; - text-align: right; - flex-shrink: 0; } /* Messages */ @@ -1590,7 +1595,7 @@ top: 0; right: 0; bottom: 0; - width: min(300px, 85vw); + width: min(380px, 90vw); max-height: none; height: 100%; border-radius: 0;