Developer
ac9f7a9299
The desktop terminal page sometimes grew an outer scrollbar because the terminal instance/wrapper/container chain lacked height constraints. Without min/max-height enforcement, xterm.js's internal viewport could expand its parent flex/grid track past the available space. - Add overflow: hidden to .terminal-page. - Add max-height: 100% and overflow: hidden to .terminal-instance. - Add max-height: 100% to .terminal-wrapper. - Add min-height: 0 to .terminal-container. - Constrain .xterm-viewport to max-height/width 100% so it fills but never exceeds its container. Quality gates: npm run typecheck, npm run lint, npm test -- --run (87 passed). Refs: openspec/changes/fix-terminal-container-overflow
39 lines
1.8 KiB
Markdown
39 lines
1.8 KiB
Markdown
# Fix Terminal Container Overflow on Desktop
|
|
|
|
## Summary
|
|
|
|
On the desktop Terminal page, the terminal container sometimes grows taller than its allocated flex/grid track and acquires its own scrollbar, which in turn causes the outer page to scroll. This happens because the flex container chain from `.terminal-page` down to `.terminal-container` is missing `min-height: 0`, allowing a child with intrinsic content height to expand its parent.
|
|
|
|
## Scope
|
|
|
|
- `apps/web/src/styles/utilities.css`
|
|
- `.terminal-page`
|
|
- `.terminal-page-content`
|
|
- `.terminal-instance`
|
|
- `.terminal-wrapper`
|
|
- `.terminal-container`
|
|
- `.xterm-viewport`
|
|
|
|
## Root Cause
|
|
|
|
`.terminal-page-content` is a flex item that receives its height from the flex parent. In CSS flexbox, a flex item's `min-height` defaults to `auto`, which is based on its content. If the xterm.js viewport/canvas renders taller than the available track, the flex item expands to fit it, pushing the page beyond `100vh` and creating a page-level scrollbar.
|
|
|
|
## Fix
|
|
|
|
1. Add `min-height: 0` to every flex/grid item in the terminal layout chain so each level respects the constrained height from its parent.
|
|
2. Keep `overflow: hidden` on the wrapper/container so xterm.js's internal viewport is the only scroll surface.
|
|
3. Ensure `.terminal-container .xterm-viewport` fills the container and does not expand past it.
|
|
|
|
## Acceptance Criteria
|
|
|
|
- [x] Terminal page never shows an outer vertical scrollbar due to terminal content.
|
|
- [x] Terminal wrapper and container stay within their allocated track.
|
|
- [x] xterm.js internal viewport still scrolls normally.
|
|
- [x] Mobile terminal layout is unaffected.
|
|
- [x] Quality gates pass: `npm run typecheck`, `npm run lint`, `npm test -- --run`.
|
|
|
|
## Related
|
|
|
|
- `openspec/specs/tool-terminal`
|
|
- `openspec/changes/fix-tmux-mouse-config`
|