问题 / #2971
#2971 Web app: page overflows sideways on phones when a tool call appears (.view's automatic minimum size)
open · @TitanMamo · 1 评论 · 去 GitHub 看
说明
### Symptom
On a phone (Chrome, 412 px viewport) the web app's page grows **wider than the screen** as soon as an MCP tool call appears in an answer: `document.documentElement.scrollWidth` jumps from 412 to ~750. Content spills off-screen — the tool row's preview/badge run past the right edge, and the header renders at viewport width while everything below it is laid out ~750 px wide.
### Root cause
Not the tool row itself — it only *amplifies* the width:
1. `.view` (`serve/web/app.css`) is a flex item of `main` (`main { display: flex; }`) and keeps the default `min-width: auto`, so the whole tab panel grows to its content's **min-content** width. A long `nowrap` string — the tool name (`firecrawl_search_feedback`, `firecrawl__firecrawl_search`) — raises that min-content above the phone width, and the panel (with everything inside) lays out wider than the viewport.
2. `.tool-call__name { white-space: nowrap }` had no `min-width: 0` / ellipsis, so it cannot shrink.
### Reproduction (no phone needed)
`firefox --headless --window-size=412,915 --screenshot out.png <page>` with the app's own CSS plus a tool-call `<summary>` markup; the page prints its numbers:
- pristine CSS: `scrollWidth=752 innerWidth=412 << OVERFLOW`
- patched CSS: `scrollWidth=412 innerWidth=412 (fits)`
### Fix (2 rules, `serve/web/app.css`)
```css
.view { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.tool-call > summary { min-width: 0; padding: 8px 12px; overflow: hidden; }
.tool-call__name { font: 500 var(--st-fs-sm)/1.2 var(--st-font-mono); color: var(--st-ink);
white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
```
Verified at 412×915: the page fits, the tool name ellipsizes (`firecrawl_…`), and the badge / seconds / chevron stay visible.
(Found on a box serving the app to a phone over the web UI; the fix is applied locally and worth carrying upstream. The test rig: a minimal page with `tokens.css` + `components.css` + `app.css` and the tool-call markup, screenshotted before/after.)
本站相关内容
相关页面的快捷入口。