fix(web): prevent private conversation items from overlapping

web/src/pages/creator/messages/index.tsx

@@ -331,6 +331,7 @@ export default function PrivateMessagesPage() {
                   </Flex>,
                 }))}
                 activeKey={activeKey} onActiveChange={setActiveKey}
+                styles={{ item: { height: 'auto', paddingBlock: 8, flexShrink: 0 } }}
                 style={{ width: '100%', flex: 1, overflowY: 'auto' }}
               /> : <Empty description={enabledAccounts.length ? '暂无私信会话' : '请在“我的账号”开启账号监听'} />}
               {visibleContacts.length < contactTotal && <Button loading={moreContacts} onClick={loadMoreContacts}>加载更多联系人</Button>}

web/tests/private-messages-page.test.cjs

@@ -210,6 +210,29 @@ test('same peer on different accounts has distinct stable keys, source names and
   assert.equal(query.get('account_id'), 'b'); assert.equal(query.get('peer_uid'), '100');
 });
 
+test('three-line conversation items grow with content, keep vertical padding and never shrink in a long list', async (t) => {
+  const rows = Array.from({ length: 50 }, (_, index) => ({
+    ...contacts[0], peer_uid: String(100 + index),
+    peer_name: '较长的联系人名称'.repeat(10), last_text: '较长的消息摘要'.repeat(20),
+  }));
+  const h = harness({ contacts: rows }); t.after(h.dispose);
+  const tree = await h.flush();
+  const props = conversations(h, tree).props;
+  assert.equal(props.styles?.item?.height, 'auto');
+  assert.equal(props.styles.item.flexShrink, 0);
+  assert.equal(props.styles.item.paddingBlock, 8);
+  assert.equal(props.style.overflowY, 'auto');
+  assert.equal(props.items.length, rows.length);
+  for (const item of props.items) {
+    assert.equal(item.label.props.vertical, true);
+    const lines = React.Children.toArray(item.label.props.children);
+    assert.equal(lines.length, 3);
+    assert.ok(lines.every((line) => line.props.ellipsis.tooltip));
+  }
+  const selected = await choose(h, 'a:149');
+  assert.equal(conversations(h, selected).props.activeKey, 'a:149');
+});
+
 test('messages are chronological, received left/sent right, with real times, errors and non-text placeholders', async (t) => {
   const h = harness({ messages: { data: [
     record(4, { message_type: 'image', text: 'not rendered as image' }),