Re-land bbiggs changes to reduce margin on narrow screens with fixes + full width setting (#10522)

This commit is contained in:
Jacob Richman
2025-10-09 19:27:20 -07:00
committed by GitHub
parent c82c2c2b15
commit 558be87311
25 changed files with 492 additions and 385 deletions

View File

@@ -37,6 +37,7 @@ import {
import * as path from 'node:path';
import { SCREEN_READER_USER_PREFIX } from '../textConstants.js';
import { useShellFocusState } from '../contexts/ShellFocusContext.js';
import { useUIState } from '../contexts/UIStateContext.js';
/**
* Returns if the terminal can be trusted to handle paste events atomically
@@ -73,25 +74,16 @@ export interface InputPromptProps {
}
// The input content, input container, and input suggestions list may have different widths
export const calculatePromptWidths = (terminalWidth: number) => {
const widthFraction = 0.9;
export const calculatePromptWidths = (mainContentWidth: number) => {
const FRAME_PADDING_AND_BORDER = 4; // Border (2) + padding (2)
const PROMPT_PREFIX_WIDTH = 2; // '> ' or '! '
const MIN_CONTENT_WIDTH = 2;
const innerContentWidth =
Math.floor(terminalWidth * widthFraction) -
FRAME_PADDING_AND_BORDER -
PROMPT_PREFIX_WIDTH;
const inputWidth = Math.max(MIN_CONTENT_WIDTH, innerContentWidth);
const FRAME_OVERHEAD = FRAME_PADDING_AND_BORDER + PROMPT_PREFIX_WIDTH;
const containerWidth = inputWidth + FRAME_OVERHEAD;
const suggestionsWidth = Math.max(20, Math.floor(terminalWidth * 1.0));
const suggestionsWidth = Math.max(20, mainContentWidth);
return {
inputWidth,
containerWidth,
inputWidth: Math.max(mainContentWidth - FRAME_OVERHEAD, 1),
containerWidth: mainContentWidth,
suggestionsWidth,
frameOverhead: FRAME_OVERHEAD,
} as const;
@@ -118,6 +110,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
}) => {
const kittyProtocol = useKittyKeyboardProtocol();
const isShellFocused = useShellFocusState();
const { mainAreaWidth } = useUIState();
const [justNavigatedHistory, setJustNavigatedHistory] = useState(false);
const [escPressCount, setEscPressCount] = useState(0);
const [showEscapePrompt, setShowEscapePrompt] = useState(false);
@@ -887,6 +880,10 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
: theme.border.default
}
paddingX={1}
width={mainAreaWidth}
flexDirection="row"
alignItems="flex-start"
minHeight={3}
>
<Text
color={statusColor ?? theme.text.accent}