opensource/mateclaw
2
0
Fork 0
mirror of https://gitee.com/mateos/mateclaw.git synced 2026-09-15 03:55:09 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
matevip 2026-05-22 14:09:18 +08:00
parent 5f571e86a2
commit 26bf75fd2f
4 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
mateclaw-ui/src/assets/main.css
View File

@ -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 p { margin: 8px 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.5rem; 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, .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 th { background: var(--mc-table-header-bg); font-weight: 600; }
.markdown-body blockquote { .markdown-body blockquote {

8
mateclaw-ui/src/components/chat/MessageBubble.vue
View File

@ -1219,6 +1219,7 @@ watch(isGenerating, (generating) => {
flex-direction: column; flex-direction: column;
gap: 2px; gap: 2px;
padding: 4px 0; padding: 4px 0;
min-width: 0;
} }
/* Iteration "no output" chip (interrupted iteration). */ /* Iteration "no output" chip (interrupted iteration). */
@ -1290,7 +1291,11 @@ watch(isGenerating, (generating) => {
display: flex; display: flex;
gap: 12px; gap: 12px;
align-items: flex-start; 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; margin-bottom: 6px;
} }
@ -1353,6 +1358,7 @@ watch(isGenerating, (generating) => {
font-size: 15px; font-size: 15px;
line-height: 1.7; line-height: 1.7;
word-break: break-word; word-break: break-word;
overflow-wrap: anywhere;
} }
.assistant-bubble { .assistant-bubble {

5
mateclaw-ui/src/components/chat/MessageList.vue
View File

@ -226,6 +226,11 @@ watch(
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
min-height: 100%; 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%;
} }
/* ==================== 空状态 / 欢迎屏 ==================== */ /* ==================== 空状态 / 欢迎屏 ==================== */

2
mateclaw-ui/src/components/chat/ToolCallSegment.vue
View File

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