Terminal View Only Uses Half of Available Width

[Idan707]

Description

The terminal view in the Worktree Studio app is only displaying at approximately 50% of the available
container width, leaving the right half of the screen unused. This significantly reduces the usable
terminal space and impacts productivity.

Current Behavior

• Terminal renders at roughly half the width of its container
• The right side of the terminal area remains empty/unused
• xterm.js reports using ~170 columns but visually appears constrained to half width
• Issue persists even after removing padding, margins, and adjusting font sizes

Expected Behavior

The terminal should expand to use the full width of its container, maximizing the available screen
real estate for terminal output.

Technical Details

• Framework: Tauri v2 with React 19 and TypeScript
• Terminal Library: xterm.js with FitAddon
• Styling: Tailwind CSS v4

Investigation Findings

Through debugging, we found:

1. The terminal's parent containers are correctly sized at 100% width
2. xterm.js element itself is only rendering at ~50% width despite containers being full width
3. The issue appears related to xterm.js dimension calculations when multiple terminal instances
   exist in the DOM with display: none styling
4. Research indicates this is a known issue with xterm.js where hidden terminals (display: none)
   interfere with the FitAddon's width calculations

Attempted Solutions

1. ✅ Removed all padding and margins from terminal containers
2. ✅ Made FileChangesPanel position absolute to prevent flex space consumption
3. ✅ Added sidebar toggle functionality for more space
4. ✅ Adjusted font size and line height settings
5. ✅ Added CSS overrides to force xterm element to 100% width
6. ❌ Terminal still visually constrained to half width

Environment

• macOS
• Node.js environment with npm
• Development mode via npm run tauri dev

Screenshot