fix(ui): stop chat content clipping in a narrow message column

mateclaw-ui/src/assets/main.css

@@ -824,7 +824,17 @@ html.dark .hljs-deletion { color: #e06c75; background: rgba(224, 108, 117, 0.1);
 
 .markdown-body p { margin: 8px 0; }
 .markdown-body ul, .markdown-body ol { padding-left: 1.5rem; margin: 8px 0; }
-.markdown-body table { border-collapse: collapse; width: 100%; margin: 12px 0; }
+.markdown-body table {
+  border-collapse: collapse;
+  /* display:block + overflow-x:auto turns a wide table into its own horizontal
+     scroll region instead of overflowing the message bubble and getting clipped
+     by the list's overflow-x:hidden. Narrow tables still stretch to full width. */
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  overflow-x: auto;
+  margin: 12px 0;
+}
 .markdown-body th, .markdown-body td { border: 1px solid var(--mc-table-border); padding: 8px 12px; text-align: left; }
 .markdown-body th { background: var(--mc-table-header-bg); font-weight: 600; }
 .markdown-body blockquote {

mateclaw-ui/src/components/chat/MessageBubble.vue

@@ -1219,6 +1219,7 @@ watch(isGenerating, (generating) => {
   flex-direction: column;
   gap: 2px;
   padding: 4px 0;
+  min-width: 0;
 }
 
 /* Iteration "no output" chip (interrupted iteration). */
@@ -1290,7 +1291,11 @@ watch(isGenerating, (generating) => {
   display: flex;
   gap: 12px;
   align-items: flex-start;
-  max-width: 920px;
+  width: 100%;
+  /* Cap at 920px on wide screens but never exceed the actual content column —
+     keeps the bubble container-relative so it narrows with the chat panel. */
+  max-width: min(920px, 100%);
+  min-width: 0;
   margin-bottom: 6px;
 }
 
@@ -1353,6 +1358,7 @@ watch(isGenerating, (generating) => {
   font-size: 15px;
   line-height: 1.7;
   word-break: break-word;
+  overflow-wrap: anywhere;
 }
 
 .assistant-bubble {

mateclaw-ui/src/components/chat/MessageList.vue

@@ -226,6 +226,11 @@ watch(
   flex-direction: column;
   gap: 14px;
   min-height: 100%;
+  /* Allow children to shrink below their intrinsic content width so a wide
+     tool-call line or table scrolls/ellipsizes internally instead of pushing
+     the column wider than the (overflow-x: hidden) viewport and getting clipped. */
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* ==================== 空状态 / 欢迎屏 ==================== */

mateclaw-ui/src/components/chat/ToolCallSegment.vue

@@ -200,6 +200,8 @@ const childProgress = computed(() => {
   color: var(--mc-text-secondary);
   user-select: none;
   transition: color 0.15s;
+  min-width: 0;
+  overflow: hidden;
 }
 .seg-tool__header:hover {
   color: var(--mc-text-primary);