Files

T

Developer ac9f7a9299 fix: prevent terminal container from overflowing page on desktop

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

2026-06-14 09:07:43 +00:00

1.8 KiB

Raw Permalink Blame History

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

Add min-height: 0 to every flex/grid item in the terminal layout chain so each level respects the constrained height from its parent.
Keep overflow: hidden on the wrapper/container so xterm.js's internal viewport is the only scroll surface.
Ensure .terminal-container .xterm-viewport fills the container and does not expand past it.

Acceptance Criteria

Terminal page never shows an outer vertical scrollbar due to terminal content.
Terminal wrapper and container stay within their allocated track.
xterm.js internal viewport still scrolls normally.
Mobile terminal layout is unaffected.
Quality gates pass: npm run typecheck, npm run lint, npm test -- --run.

openspec/specs/tool-terminal
openspec/changes/fix-tmux-mouse-config

1.8 KiB Raw Permalink Blame History