Issues / #2971

#2971 Web app: page overflows sideways on phones when a tool call appears (.view's automatic minimum size)

open · @TitanMamo · 1 comentarios · En GitHub

Server & API

Descripción

### 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.)

En el sitio

Enlaces a install, modelos, releases.