diff --git a/static/style.css b/static/style.css index 9d24bc17866..d8e4c9c5b7e 100644 --- a/static/style.css +++ b/static/style.css @@ -1233,12 +1233,12 @@ body.resizing{user-select:none;cursor:col-resize;} .tool-card-toggle{font-size:10px;color:var(--muted);opacity:.5;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transform-origin:center;transition:transform .18s ease;will-change:transform;} .tool-card.open .tool-card-toggle{transform:rotate(90deg);} .tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;border-top:1px solid transparent;padding:0 12px;transition:max-height .22s ease,opacity .18s ease,padding .22s ease,border-top-color .22s ease;} -.tool-card.open .tool-card-detail{max-height:520px;opacity:1;padding:8px 12px;border-top-color:rgba(255,255,255,.06);} +.tool-card.open .tool-card-detail{max-height:600px;opacity:1;padding:8px 12px;border-top-color:rgba(255,255,255,.06);overflow:auto;} .tool-card-args{margin-bottom:6px;} .tool-card-args div{font-size:11px;line-height:1.6;} .tool-arg-key{color:var(--blue);font-family:'SF Mono',ui-monospace,monospace;font-size:11px;} .tool-arg-val{color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;font-size:11px;word-break:break-all;} -.tool-card-result pre{font-size:11px;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;max-height:180px;overflow-y:auto;margin:0;line-height:1.55;} +.tool-card-result pre{font-size:11px;color:var(--muted);font-family:'SF Mono',ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;max-height:360px;overflow-y:auto;margin:0;line-height:1.55;} /* ── Manual compression cards (transient transcript-local feedback) ── */ .live-compression-cards{ diff --git a/static/ui.js b/static/ui.js index c135906b538..4029d316c5f 100644 --- a/static/ui.js +++ b/static/ui.js @@ -2614,9 +2614,9 @@ function buildToolCard(tc){ let displaySnippet=''; if(tc.snippet){ const s=tc.snippet; - if(s.length<=220){displaySnippet=s;} + if(s.length<=800){displaySnippet=s;} else{ - const cutoff=s.slice(0,220); + const cutoff=s.slice(0,800); const lastBreak=Math.max(cutoff.lastIndexOf('. '),cutoff.lastIndexOf('\n'),cutoff.lastIndexOf('; ')); displaySnippet=lastBreak>80?s.slice(0,lastBreak+1):cutoff; } diff --git a/tests/test_ui_card_animation.py b/tests/test_ui_card_animation.py index fe979cd9998..dc8a1a72258 100644 --- a/tests/test_ui_card_animation.py +++ b/tests/test_ui_card_animation.py @@ -16,7 +16,12 @@ def test_tool_card_toggle_uses_transformable_layout_and_transition(): def test_tool_card_detail_uses_transitionable_collapsed_state(): assert ".tool-card-detail{display:block;max-height:0;opacity:0;overflow:hidden;" in COMPACT_CSS assert re.search( - r"\.tool-card\.open\s+\.tool-card-detail\s*\{[^}]*max-height:\s*520px;[^}]*opacity:\s*1;", + r"\.tool-card\.open\s+\.tool-card-detail\s*\{[^}]*max-height:\s*600px;[^}]*opacity:\s*1;", + STYLE_CSS, + ) + # Open state must set overflow to auto so the inner
scroll is not clipped (#1170).
+ assert re.search(
+ r"\.tool-card\.open\s+\.tool-card-detail\s*\{[^}]*overflow:\s*auto;",
STYLE_CSS,
)