Widget: chat history list squashes rows instead of scrolling

[AmitAvital1]

What is wrong

In the widget's chat history drawer ("Chats"), the conversation rows get squashed instead of scrolling once there are many conversations.

Each row shrinks below its natural height until only the padding is left, so the titles get cut off at the top and bottom and rows visually overlap. With ~20 conversations there is no scrollbar at all — the list "fits" only because every row was compressed.

Why it happens

.thread-list is a display: flex; flex-direction: column container (styles.ts:76). Its children .thread-item never set flex-shrink, so they keep the CSS default flex-shrink: 1 and the browser shrinks them to make the content fit the container — instead of overflowing and triggering overflow-y: auto.

The same applies to the drawer's other flex children, .thread-drawer-head and .thread-new, which also get compressed.

How to reproduce

1. Open the widget and create ~20 conversations (or seed the thread list with 20 items).
2. Open the chat history drawer (the history icon in the header).
3. Look at the list.

Measured in an isolated repro using the exact CSS from styles.ts, with the real panel size (440x680):

conversations	row height	list scrollable?
20 (current CSS)	24.9px (natural: 35.5px)	no
45 (current CSS)	20px — padding only, text clipped	yes, but rows unreadable
20 (with flex: 0 0 auto)	35.5px	yes

Expected

Rows always keep their natural height, and .thread-list scrolls as soon as the rows do not fit.

Suggested fix

Opt the drawer's children out of shrinking, in src/agent_manager/api/static/widget/styles/styles.ts:

.thread-drawer-head, .thread-new, .thread-item { flex: 0 0 auto; }

Things to watch out for

• .thread-item uses white-space: nowrap; overflow: hidden; text-overflow: ellipsis, which hides the symptom in the horizontal direction but not the vertical clipping — the row boxes themselves are too short.
• Note that .thread-list already has the correct flex: 1; min-height: 0; overflow-y: auto — the bug is one level down, in the children.
• .messages (the message list) has the same flex: 1; min-height: 0; overflow-y: auto pattern, but its content wrapper .conversation-content uses min-height: 100%, so it is not affected. Worth a quick check anyway when fixing.
• src/agent_manager/api/static/widget.js is the built bundle and contains a copy of this CSS — it needs to be rebuilt after the fix.
• A regression test would be a good idea: render the drawer with N conversations and assert the row height does not depend on N.

[AmitAvital1]

@vaibhav8a please comment so i can assign it to you