Add terminal position toggle and allow thinner review panel #6893
Conversation
marcodenic
commented
Jan 5, 2026
marcodenic
commented
- Add terminal position state (bottom/right) to layout context
- Extract TerminalPanel into reusable component with position toggle button
- Conditionally render terminal at bottom (full width) or right (stacked with review)
- Increase session panel max width from 45% to 75% to allow thinner review panel
- Show right panel when terminal is in right position even without review tabs
- Terminal takes full height when no review tabs are present
- Add dynamic padding to chat content to account for terminal height
- Add keyboard shortcut (ctrl+shift+) for terminal position toggle
- Add terminal position state (bottom/right) to layout context - Extract TerminalPanel into reusable component with position toggle button - Conditionally render terminal at bottom (full width) or right (stacked with review) - Increase session panel max width from 45% to 75% to allow thinner review panel - Show right panel when terminal is in right position even without review tabs - Terminal takes full height when no review tabs are present - Add dynamic padding to chat content to account for terminal height - Add keyboard shortcut (ctrl+shift+\) for terminal position toggle
There was a problem hiding this comment.
Pull request overview
This PR adds a terminal position toggle feature that allows users to move the terminal between the bottom of the screen (full width) and the right side panel (stacked with the review panel). The implementation extracts terminal rendering into a reusable TerminalPanel component and adjusts the layout logic to accommodate both positions.
Key changes:
- Added terminal position state ("bottom" | "right") to the layout context with toggle functionality
- Created a new reusable
TerminalPanelcomponent with position-aware rendering and a toggle button - Modified the right panel visibility logic to show when terminal is in right position, even without review tabs
- Increased session panel maximum width from 45% to 75% to allow thinner review panels
- Added keyboard shortcut (ctrl+shift+) for toggling terminal position
- Implemented dynamic padding for chat content based on terminal position and height
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/app/src/context/layout.tsx | Added terminal position state management with toggle methods and default value |
| packages/app/src/components/session/session-terminal-panel.tsx | New reusable TerminalPanel component with position-aware rendering, toggle button, and drag-and-drop support for terminal tabs |
| packages/app/src/components/session/index.ts | Exported new TerminalPanel component |
| packages/app/src/pages/session.tsx | Refactored to use TerminalPanel component, added keyboard shortcut, updated showTabs logic to include right-positioned terminal, adjusted chat padding calculation, increased max session width to 75% |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| style={props.fullHeight ? undefined : { height: `${layout.terminal.height()}px` }} | ||
| > | ||
| <ResizeHandle | ||
| class={props.fullHeight ? "hidden" : ""} | ||
| direction="vertical" | ||
| size={layout.terminal.height()} | ||
| min={100} | ||
| max={window.innerHeight * 0.6} | ||
| collapseThreshold={50} | ||
| onResize={layout.terminal.resize} | ||
| onCollapse={layout.terminal.close} | ||
| /> |
There was a problem hiding this comment.
The terminal's layout context only manages height but not width. When the terminal is positioned on the right (props.position === "right"), the ResizeHandle should allow horizontal resizing to control the width of the right panel. However, there's no corresponding width property or resize method in the layout context to handle this. Either add width state management to the terminal section of the layout context, or disable resizing when the terminal is in the right position.
| style={props.fullHeight ? undefined : { height: `${layout.terminal.height()}px` }} | |
| > | |
| <ResizeHandle | |
| class={props.fullHeight ? "hidden" : ""} | |
| direction="vertical" | |
| size={layout.terminal.height()} | |
| min={100} | |
| max={window.innerHeight * 0.6} | |
| collapseThreshold={50} | |
| onResize={layout.terminal.resize} | |
| onCollapse={layout.terminal.close} | |
| /> | |
| style={ | |
| props.fullHeight || props.position === "right" | |
| ? undefined | |
| : { height: `${layout.terminal.height()}px` } | |
| } | |
| > | |
| {props.position === "bottom" && ( | |
| <ResizeHandle | |
| class={props.fullHeight ? "hidden" : ""} | |
| direction="vertical" | |
| size={layout.terminal.height()} | |
| min={100} | |
| max={window.innerHeight * 0.6} | |
| collapseThreshold={50} | |
| onResize={layout.terminal.resize} | |
| onCollapse={layout.terminal.close} | |
| /> | |
| )} |
| return ( | ||
| <div | ||
| classList={{ | ||
| "relative w-full flex-col border-t border-border-weak-base": true, |
There was a problem hiding this comment.
The classList includes "flex-col" but is missing the "flex" class. The "flex-col" directive requires the element to have "display: flex" applied, which is done via the "flex" class in Tailwind. Without it, the flex-col class will not have the intended effect. The "flex-1" class (when fullHeight is true) does apply "flex: 1 1 0%", but doesn't set "display: flex".
| "relative w-full flex-col border-t border-border-weak-base": true, | |
| "relative w-full flex flex-col border-t border-border-weak-base": true, |
1 participant
