From 750074fedeacec814c208e296c52b49095e0b88c Mon Sep 17 00:00:00 2001 From: Vaibhav Srivastava Date: Sat, 22 Aug 2026 13:51:47 +0530 Subject: [PATCH] fix(widget): stop the chat history list squashing rows instead of scrolling .thread-drawer is a flex column, so .thread-drawer-head, .thread-new and .thread-item inherited flex-shrink: 1 and the browser compressed them to fit rather than letting .thread-list overflow. At ~20 conversations the rows fell from their natural 36px to 24.5px with no scrollbar at all; by 45 they were 19px -- padding only, titles clipped top and bottom. Opt those three out with flex: 0 0 auto, so rows keep their natural height and the list's existing overflow-y: auto does the scrolling. Rebuilt static/widget.js, which is committed and carries the bundled CSS. Closes #61 --- src/agent_manager/api/static/widget.js | 6 ++++++ src/agent_manager/api/static/widget/styles/styles.ts | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/agent_manager/api/static/widget.js b/src/agent_manager/api/static/widget.js index c3d3cf23..90e6155d 100644 --- a/src/agent_manager/api/static/widget.js +++ b/src/agent_manager/api/static/widget.js @@ -54345,6 +54345,12 @@ function styles(config) { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #3f3f46; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s; } + /* The drawer is a flex column, so its children inherit flex-shrink: 1 and the browser + compresses them to fit rather than letting .thread-list overflow. At ~20 conversations the + rows fell from their natural 36px to 24.5px with no scrollbar at all, and by 45 they were + 19px -- padding only, with the titles clipped top and bottom. Opting out restores natural + height and lets the list's own overflow-y: auto do its job. */ + .thread-drawer-head, .thread-new, .thread-item { flex: 0 0 auto; } .thread-item:hover { background: #f4f4f5; } .thread-item.active { background: #f4f4f5; color: #18181b; font-weight: 600; } .thread-empty { color: #a1a1aa; font-size: 13px; text-align: center; padding: 24px 12px; margin: 0; } diff --git a/src/agent_manager/api/static/widget/styles/styles.ts b/src/agent_manager/api/static/widget/styles/styles.ts index d9b22a18..77743a75 100644 --- a/src/agent_manager/api/static/widget/styles/styles.ts +++ b/src/agent_manager/api/static/widget/styles/styles.ts @@ -80,6 +80,12 @@ export function styles(config: AgentChatConfig): string { padding: 10px 12px; border-radius: 10px; font-size: 13.5px; color: #3f3f46; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .12s; } + /* The drawer is a flex column, so its children inherit flex-shrink: 1 and the browser + compresses them to fit rather than letting .thread-list overflow. At ~20 conversations the + rows fell from their natural 36px to 24.5px with no scrollbar at all, and by 45 they were + 19px -- padding only, with the titles clipped top and bottom. Opting out restores natural + height and lets the list's own overflow-y: auto do its job. */ + .thread-drawer-head, .thread-new, .thread-item { flex: 0 0 auto; } .thread-item:hover { background: #f4f4f5; } .thread-item.active { background: #f4f4f5; color: #18181b; font-weight: 600; } .thread-empty { color: #a1a1aa; font-size: 13px; text-align: center; padding: 24px 12px; margin: 0; }