diff --git a/packages/cli/src/config/settingsSchema.ts b/packages/cli/src/config/settingsSchema.ts
index 70096ea958..9e9f71d5c0 100644
--- a/packages/cli/src/config/settingsSchema.ts
+++ b/packages/cli/src/config/settingsSchema.ts
@@ -411,6 +411,15 @@ const SETTINGS_SCHEMA = {
         description: 'Show citations for generated text in the chat.',
         showInDialog: true,
       },
+      useFullWidth: {
+        type: 'boolean',
+        label: 'Use Full Width',
+        category: 'UI',
+        requiresRestart: false,
+        default: false,
+        description: 'Use the entire width of the terminal for output.',
+        showInDialog: true,
+      },
       customWittyPhrases: {
         type: 'array',
         label: 'Custom Witty Phrases',
diff --git a/packages/cli/src/gemini.test.tsx b/packages/cli/src/gemini.test.tsx
index a0de0d6165..89b80329a3 100644
--- a/packages/cli/src/gemini.test.tsx
+++ b/packages/cli/src/gemini.test.tsx
@@ -482,7 +482,7 @@ describe('startInteractiveUI', () => {
 
     // Verify all startup tasks were called
     expect(getCliVersion).toHaveBeenCalledTimes(1);
-    expect(registerCleanup).toHaveBeenCalledTimes(1);
+    expect(registerCleanup).toHaveBeenCalledTimes(2);
 
     // Verify cleanup handler is registered with unmount function
     const cleanupFn = vi.mocked(registerCleanup).mock.calls[0][0];
diff --git a/packages/cli/src/gemini.tsx b/packages/cli/src/gemini.tsx
index 1182d2de6a..e25b8bff1a 100644
--- a/packages/cli/src/gemini.tsx
+++ b/packages/cli/src/gemini.tsx
@@ -145,6 +145,22 @@ export async function startInteractiveUI(
   workspaceRoot: string = process.cwd(),
   initializationResult: InitializationResult,
 ) {
+  // Disable line wrapping.
+  // We rely on Ink to manage all line wrapping by forcing all content to be
+  // narrower than the terminal width so there is no need for the terminal to
+  // also attempt line wrapping.
+  // Disabling line wrapping reduces Ink rendering artifacts particularly when
+  // the terminal is resized on terminals that full respect this escape code
+  // such as Ghostty. Some terminals such as Iterm2 only respect line wrapping
+  // when using the alternate buffer, which Gemini CLI does not use because we
+  // do not yet have support for scrolling in that mode.
+  process.stdout.write('\x1b[?7l');
+
+  registerCleanup(() => {
+    // Re-enable line wrapping on exit.
+    process.stdout.write('\x1b[?7h');
+  });
+
   const version = await getCliVersion();
   setWindowTitle(basename(workspaceRoot), settings);
 
diff --git a/packages/cli/src/test-utils/render.tsx b/packages/cli/src/test-utils/render.tsx
index 690d765d80..5002e34a29 100644
--- a/packages/cli/src/test-utils/render.tsx
+++ b/packages/cli/src/test-utils/render.tsx
@@ -6,12 +6,34 @@
 
 import { render } from 'ink-testing-library';
 import type React from 'react';
-import { LoadedSettings } from '../config/settings.js';
+import { LoadedSettings, type Settings } from '../config/settings.js';
 import { KeypressProvider } from '../ui/contexts/KeypressContext.js';
 import { SettingsContext } from '../ui/contexts/SettingsContext.js';
 import { ShellFocusContext } from '../ui/contexts/ShellFocusContext.js';
+import { UIStateContext, type UIState } from '../ui/contexts/UIStateContext.js';
+import { ConfigContext } from '../ui/contexts/ConfigContext.js';
+import { calculateMainAreaWidth } from '../ui/utils/ui-sizing.js';
+import { VimModeProvider } from '../ui/contexts/VimModeContext.js';
 
-const mockSettings = new LoadedSettings(
+import { type Config } from '@google/gemini-cli-core';
+
+const mockConfig = {
+  getModel: () => 'gemini-pro',
+  getTargetDir: () =>
+    '/Users/test/project/foo/bar/and/some/more/directories/to/make/it/long',
+  getDebugMode: () => false,
+};
+
+const configProxy = new Proxy(mockConfig, {
+  get(target, prop) {
+    if (prop in target) {
+      return target[prop as keyof typeof target];
+    }
+    throw new Error(`mockConfig does not have property ${String(prop)}`);
+  },
+});
+
+export const mockSettings = new LoadedSettings(
   { path: '', settings: {}, originalSettings: {} },
   { path: '', settings: {}, originalSettings: {} },
   { path: '', settings: {}, originalSettings: {} },
@@ -20,16 +42,83 @@ const mockSettings = new LoadedSettings(
   new Set(),
 );
 
+export const createMockSettings = (
+  overrides: Partial<Settings>,
+): LoadedSettings => {
+  const settings = overrides as Settings;
+  return new LoadedSettings(
+    { path: '', settings: {}, originalSettings: {} },
+    { path: '', settings: {}, originalSettings: {} },
+    { path: '', settings, originalSettings: settings },
+    { path: '', settings: {}, originalSettings: {} },
+    true,
+    new Set(),
+  );
+};
+
+// A minimal mock UIState to satisfy the context provider.
+// Tests that need specific UIState values should provide their own.
+const baseMockUiState = {
+  mainAreaWidth: 100,
+  terminalWidth: 120,
+};
+
 export const renderWithProviders = (
   component: React.ReactElement,
-  { shellFocus = true, settings = mockSettings } = {},
-): ReturnType<typeof render> =>
-  render(
-    <SettingsContext.Provider value={settings}>
-      <ShellFocusContext.Provider value={shellFocus}>
-        <KeypressProvider kittyProtocolEnabled={true}>
-          {component}
-        </KeypressProvider>
-      </ShellFocusContext.Provider>
-    </SettingsContext.Provider>,
+  {
+    shellFocus = true,
+    settings = mockSettings,
+    uiState: providedUiState,
+    width,
+    config = configProxy as unknown as Config,
+  }: {
+    shellFocus?: boolean;
+    settings?: LoadedSettings;
+    uiState?: Partial<UIState>;
+    width?: number;
+    config?: Config;
+  } = {},
+): ReturnType<typeof render> => {
+  const baseState: UIState = new Proxy(
+    { ...baseMockUiState, ...providedUiState },
+    {
+      get(target, prop) {
+        if (prop in target) {
+          return target[prop as keyof typeof target];
+        }
+        // For properties not in the base mock or provided state,
+        // we'll check the original proxy to see if it's a defined but
+        // unprovided property, and if not, throw.
+        if (prop in baseMockUiState) {
+          return baseMockUiState[prop as keyof typeof baseMockUiState];
+        }
+        throw new Error(`mockUiState does not have property ${String(prop)}`);
+      },
+    },
+  ) as UIState;
+
+  const terminalWidth = width ?? baseState.terminalWidth;
+  const mainAreaWidth = calculateMainAreaWidth(terminalWidth, settings);
+
+  const finalUiState = {
+    ...baseState,
+    terminalWidth,
+    mainAreaWidth,
+  };
+
+  return render(
+    <ConfigContext.Provider value={config}>
+      <SettingsContext.Provider value={settings}>
+        <UIStateContext.Provider value={finalUiState}>
+          <VimModeProvider settings={settings}>
+            <ShellFocusContext.Provider value={shellFocus}>
+              <KeypressProvider kittyProtocolEnabled={true}>
+                {component}
+              </KeypressProvider>
+            </ShellFocusContext.Provider>
+          </VimModeProvider>
+        </UIStateContext.Provider>
+      </SettingsContext.Provider>
+    </ConfigContext.Provider>,
   );
+};
diff --git a/packages/cli/src/ui/AppContainer.tsx b/packages/cli/src/ui/AppContainer.tsx
index eb03394611..f8bdda1899 100644
--- a/packages/cli/src/ui/AppContainer.tsx
+++ b/packages/cli/src/ui/AppContainer.tsx
@@ -59,7 +59,8 @@ import { useVimMode } from './contexts/VimModeContext.js';
 import { useConsoleMessages } from './hooks/useConsoleMessages.js';
 import { useTerminalSize } from './hooks/useTerminalSize.js';
 import { calculatePromptWidths } from './components/InputPrompt.js';
-import { useStdin, useStdout } from 'ink';
+import { useStdout, useStdin } from 'ink';
+import { calculateMainAreaWidth } from './utils/ui-sizing.js';
 import ansiEscapes from 'ansi-escapes';
 import * as fs from 'node:fs';
 import { basename } from 'node:path';
@@ -263,13 +264,14 @@ export const AppContainer = (props: AppContainerProps) => {
     registerCleanup(consolePatcher.cleanup);
   }, [handleNewMessage, config]);
 
+  const mainAreaWidth = calculateMainAreaWidth(terminalWidth, settings);
   // Derive widths for InputPrompt using shared helper
   const { inputWidth, suggestionsWidth } = useMemo(() => {
     const { inputWidth, suggestionsWidth } =
-      calculatePromptWidths(terminalWidth);
+      calculatePromptWidths(mainAreaWidth);
     return { inputWidth, suggestionsWidth };
-  }, [terminalWidth]);
-  const mainAreaWidth = Math.floor(terminalWidth * 0.9);
+  }, [mainAreaWidth]);
+
   const staticAreaMaxItemHeight = Math.max(terminalHeight * 4, 100);
 
   const isValidPath = useCallback((filePath: string): boolean => {
diff --git a/packages/cli/src/ui/components/AnsiOutput.test.tsx b/packages/cli/src/ui/components/AnsiOutput.test.tsx
index 5bb3673e73..3495a27b4f 100644
--- a/packages/cli/src/ui/components/AnsiOutput.test.tsx
+++ b/packages/cli/src/ui/components/AnsiOutput.test.tsx
@@ -29,7 +29,7 @@ describe('<AnsiOutputText />', () => {
         createAnsiToken({ text: 'world!' }),
       ],
     ];
-    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    const { lastFrame } = render(<AnsiOutputText data={data} width={80} />);
     expect(lastFrame()).toBe('Hello, world!');
   });
 
@@ -45,7 +45,7 @@ describe('<AnsiOutputText />', () => {
     ];
     // Note: ink-testing-library doesn't render styles, so we can only check the text.
     // We are testing that it renders without crashing.
-    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    const { lastFrame } = render(<AnsiOutputText data={data} width={80} />);
     expect(lastFrame()).toBe('BoldItalicUnderlineDimInverse');
   });
 
@@ -58,7 +58,7 @@ describe('<AnsiOutputText />', () => {
     ];
     // Note: ink-testing-library doesn't render colors, so we can only check the text.
     // We are testing that it renders without crashing.
-    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    const { lastFrame } = render(<AnsiOutputText data={data} width={80} />);
     expect(lastFrame()).toBe('Red FGBlue BG');
   });
 
@@ -69,7 +69,7 @@ describe('<AnsiOutputText />', () => {
       [createAnsiToken({ text: 'Third line' })],
       [createAnsiToken({ text: '' })],
     ];
-    const { lastFrame } = render(<AnsiOutputText data={data} />);
+    const { lastFrame } = render(<AnsiOutputText data={data} width={80} />);
     const output = lastFrame();
     expect(output).toBeDefined();
     const lines = output!.split('\n');
@@ -85,7 +85,7 @@ describe('<AnsiOutputText />', () => {
       [createAnsiToken({ text: 'Line 4' })],
     ];
     const { lastFrame } = render(
-      <AnsiOutputText data={data} availableTerminalHeight={2} />,
+      <AnsiOutputText data={data} availableTerminalHeight={2} width={80} />,
     );
     const output = lastFrame();
     expect(output).not.toContain('Line 1');
@@ -99,7 +99,9 @@ describe('<AnsiOutputText />', () => {
     for (let i = 0; i < 1000; i++) {
       largeData.push([createAnsiToken({ text: `Line ${i}` })]);
     }
-    const { lastFrame } = render(<AnsiOutputText data={largeData} />);
+    const { lastFrame } = render(
+      <AnsiOutputText data={largeData} width={80} />,
+    );
     // We are just checking that it renders something without crashing.
     expect(lastFrame()).toBeDefined();
   });
diff --git a/packages/cli/src/ui/components/AnsiOutput.tsx b/packages/cli/src/ui/components/AnsiOutput.tsx
index 2a714f7cf4..8b54eb6453 100644
--- a/packages/cli/src/ui/components/AnsiOutput.tsx
+++ b/packages/cli/src/ui/components/AnsiOutput.tsx
@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { Text } from 'ink';
+import { Box, Text } from 'ink';
 import type { AnsiLine, AnsiOutput, AnsiToken } from '@google/gemini-cli-core';
 
 const DEFAULT_HEIGHT = 24;
@@ -13,34 +13,40 @@ const DEFAULT_HEIGHT = 24;
 interface AnsiOutputProps {
   data: AnsiOutput;
   availableTerminalHeight?: number;
+  width: number;
 }
 
 export const AnsiOutputText: React.FC<AnsiOutputProps> = ({
   data,
   availableTerminalHeight,
+  width,
 }) => {
   const lastLines = data.slice(
     -(availableTerminalHeight && availableTerminalHeight > 0
       ? availableTerminalHeight
       : DEFAULT_HEIGHT),
   );
-  return lastLines.map((line: AnsiLine, lineIndex: number) => (
-    <Text key={lineIndex}>
-      {line.length > 0
-        ? line.map((token: AnsiToken, tokenIndex: number) => (
-            <Text
-              key={tokenIndex}
-              color={token.inverse ? token.bg : token.fg}
-              backgroundColor={token.inverse ? token.fg : token.bg}
-              dimColor={token.dim}
-              bold={token.bold}
-              italic={token.italic}
-              underline={token.underline}
-            >
-              {token.text}
-            </Text>
-          ))
-        : null}
-    </Text>
-  ));
+  return (
+    <Box flexDirection="column" width={width} flexShrink={0}>
+      {lastLines.map((line: AnsiLine, lineIndex: number) => (
+        <Text key={lineIndex} wrap="truncate">
+          {line.length > 0
+            ? line.map((token: AnsiToken, tokenIndex: number) => (
+                <Text
+                  key={tokenIndex}
+                  color={token.inverse ? token.bg : token.fg}
+                  backgroundColor={token.inverse ? token.fg : token.bg}
+                  dimColor={token.dim}
+                  bold={token.bold}
+                  italic={token.italic}
+                  underline={token.underline}
+                >
+                  {token.text}
+                </Text>
+              ))
+            : null}
+        </Text>
+      ))}
+    </Box>
+  );
 };
diff --git a/packages/cli/src/ui/components/Composer.tsx b/packages/cli/src/ui/components/Composer.tsx
index 2c5d0f16b7..1d4e942624 100644
--- a/packages/cli/src/ui/components/Composer.tsx
+++ b/packages/cli/src/ui/components/Composer.tsx
@@ -5,13 +5,12 @@
  */
 
 import { Box, Text, useIsScreenReaderEnabled } from 'ink';
-import { useMemo } from 'react';
 import { LoadingIndicator } from './LoadingIndicator.js';
 import { ContextSummaryDisplay } from './ContextSummaryDisplay.js';
 import { AutoAcceptIndicator } from './AutoAcceptIndicator.js';
 import { ShellModeIndicator } from './ShellModeIndicator.js';
 import { DetailedMessagesDisplay } from './DetailedMessagesDisplay.js';
-import { InputPrompt, calculatePromptWidths } from './InputPrompt.js';
+import { InputPrompt } from './InputPrompt.js';
 import { Footer } from './Footer.js';
 import { ShowMoreLines } from './ShowMoreLines.js';
 import { QueuedMessageDisplay } from './QueuedMessageDisplay.js';
@@ -40,14 +39,8 @@ export const Composer = () => {
 
   const { contextFileNames, showAutoAcceptIndicator } = uiState;
 
-  // Use the container width of InputPrompt for width of DetailedMessagesDisplay
-  const { containerWidth } = useMemo(
-    () => calculatePromptWidths(uiState.terminalWidth),
-    [uiState.terminalWidth],
-  );
-
   return (
-    <Box flexDirection="column">
+    <Box flexDirection="column" width={uiState.mainAreaWidth} flexShrink={0}>
       {!uiState.embeddedShellFocused && (
         <LoadingIndicator
           thought={
@@ -124,7 +117,7 @@ export const Composer = () => {
               maxHeight={
                 uiState.constrainHeight ? debugConsoleMaxHeight : undefined
               }
-              width={containerWidth}
+              width={uiState.mainAreaWidth}
             />
             <ShowMoreLines constrainHeight={uiState.constrainHeight} />
           </Box>
diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx
index 1c77c2a859..40098a14ca 100644
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx
+++ b/packages/cli/src/ui/components/ContextSummaryDisplay.test.tsx
@@ -51,10 +51,10 @@ describe('<ContextSummaryDisplay />', () => {
     const { lastFrame } = renderWithWidth(60, baseProps);
     const output = lastFrame();
     const expectedLines = [
-      'Using:',
-      '  - 1 open file (ctrl+g to view)',
-      '  - 1 GEMINI.md file',
-      '  - 1 MCP server (ctrl+t to view)',
+      ' Using:',
+      '   - 1 open file (ctrl+g to view)',
+      '   - 1 GEMINI.md file',
+      '   - 1 MCP server (ctrl+t to view)',
     ];
     const actualLines = output.split('\n');
     expect(actualLines).toEqual(expectedLines);
@@ -75,10 +75,11 @@ describe('<ContextSummaryDisplay />', () => {
     const props = {
       ...baseProps,
       geminiMdFileCount: 0,
+      contextFileNames: [],
       mcpServers: {},
     };
     const { lastFrame } = renderWithWidth(60, props);
-    const expectedLines = ['Using:', '  - 1 open file (ctrl+g to view)'];
+    const expectedLines = [' Using:', '   - 1 open file (ctrl+g to view)'];
     const actualLines = lastFrame().split('\n');
     expect(actualLines).toEqual(expectedLines);
   });
diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
index 388bd44edc..be38b12584 100644
--- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
+++ b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx
@@ -98,7 +98,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
 
   if (isNarrow) {
     return (
-      <Box flexDirection="column">
+      <Box flexDirection="column" paddingX={1}>
         <Text color={theme.text.secondary}>Using:</Text>
         {summaryParts.map((part, index) => (
           <Text key={index} color={theme.text.secondary}>
@@ -110,7 +110,7 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
   }
 
   return (
-    <Box>
+    <Box paddingX={1}>
       <Text color={theme.text.secondary}>
         Using: {summaryParts.join(' | ')}
       </Text>
diff --git a/packages/cli/src/ui/components/ContextUsageDisplay.tsx b/packages/cli/src/ui/components/ContextUsageDisplay.tsx
index d7d8c063f0..25dad9c7e3 100644
--- a/packages/cli/src/ui/components/ContextUsageDisplay.tsx
+++ b/packages/cli/src/ui/components/ContextUsageDisplay.tsx
@@ -11,15 +11,21 @@ import { tokenLimit } from '@google/gemini-cli-core';
 export const ContextUsageDisplay = ({
   promptTokenCount,
   model,
+  terminalWidth,
 }: {
   promptTokenCount: number;
   model: string;
+  terminalWidth: number;
 }) => {
   const percentage = promptTokenCount / tokenLimit(model);
+  const percentageLeft = ((1 - percentage) * 100).toFixed(0);
+
+  const label = terminalWidth < 100 ? '%' : '% context left';
 
   return (
     <Text color={theme.text.secondary}>
-      ({((1 - percentage) * 100).toFixed(0)}% context left)
+      ({percentageLeft}
+      {label})
     </Text>
   );
 };
diff --git a/packages/cli/src/ui/components/Footer.test.tsx b/packages/cli/src/ui/components/Footer.test.tsx
index 3c0a4d9b96..5d7df49610 100644
--- a/packages/cli/src/ui/components/Footer.test.tsx
+++ b/packages/cli/src/ui/components/Footer.test.tsx
@@ -4,20 +4,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { render } from 'ink-testing-library';
-import { describe, it, expect, vi } from 'vitest';
+import {
+  renderWithProviders,
+  createMockSettings,
+} from '../../test-utils/render.js';
 import { Footer } from './Footer.js';
-import * as useTerminalSize from '../hooks/useTerminalSize.js';
 import { tildeifyPath } from '@google/gemini-cli-core';
-import path from 'node:path';
-import { type UIState, UIStateContext } from '../contexts/UIStateContext.js';
-import { ConfigContext } from '../contexts/ConfigContext.js';
-import { SettingsContext } from '../contexts/SettingsContext.js';
-import type { LoadedSettings } from '../../config/settings.js';
-import { VimModeProvider } from '../contexts/VimModeContext.js';
-
-vi.mock('../hooks/useTerminalSize.js');
-const useTerminalSizeMock = vi.mocked(useTerminalSize.useTerminalSize);
 
 vi.mock('@google/gemini-cli-core', async (importOriginal) => {
   const original =
@@ -40,139 +32,93 @@ const defaultProps = {
   branchName: 'main',
 };
 
-const createMockConfig = (overrides = {}) => ({
-  getModel: vi.fn(() => defaultProps.model),
-  getTargetDir: vi.fn(() => defaultProps.targetDir),
-  getDebugMode: vi.fn(() => false),
-  ...overrides,
-});
-
-const createMockUIState = (overrides: Partial<UIState> = {}): UIState =>
-  ({
-    sessionStats: {
-      lastPromptTokenCount: 100,
-    },
-    branchName: defaultProps.branchName,
-    ...overrides,
-  }) as UIState;
-
-const createDefaultSettings = (
-  options: {
-    showMemoryUsage?: boolean;
-    hideCWD?: boolean;
-    hideSandboxStatus?: boolean;
-    hideModelInfo?: boolean;
-  } = {},
-): LoadedSettings =>
-  ({
-    merged: {
-      ui: {
-        showMemoryUsage: options.showMemoryUsage,
-        footer: {
-          hideCWD: options.hideCWD,
-          hideSandboxStatus: options.hideSandboxStatus,
-          hideModelInfo: options.hideModelInfo,
-        },
-      },
-    },
-  }) as never;
-
-const renderWithWidth = (
-  width: number,
-  uiState: UIState,
-  settings: LoadedSettings = createDefaultSettings(),
-) => {
-  useTerminalSizeMock.mockReturnValue({ columns: width, rows: 24 });
-  return render(
-    <ConfigContext.Provider value={createMockConfig() as never}>
-      <SettingsContext.Provider value={settings}>
-        <VimModeProvider settings={settings}>
-          <UIStateContext.Provider value={uiState}>
-            <Footer />
-          </UIStateContext.Provider>
-        </VimModeProvider>
-      </SettingsContext.Provider>
-    </ConfigContext.Provider>,
-  );
+const sessionStats = {
+  sessionStats: { lastPromptTokenCount: 0, lastResponseTokenCount: 0 },
 };
 
 describe('<Footer />', () => {
   it('renders the component', () => {
-    const { lastFrame } = renderWithWidth(120, createMockUIState());
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: { branchName: defaultProps.branchName, ...sessionStats },
+    });
     expect(lastFrame()).toBeDefined();
   });
 
   describe('path display', () => {
-    it('should display shortened path on a wide terminal', () => {
-      const { lastFrame } = renderWithWidth(120, createMockUIState());
+    it('should display a shortened path on a narrow terminal', () => {
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 79,
+        uiState: { ...sessionStats },
+      });
       const tildePath = tildeifyPath(defaultProps.targetDir);
-      const expectedPath = '...' + tildePath.slice(tildePath.length - 48 + 3);
-      expect(lastFrame()).toContain(expectedPath);
-    });
-
-    it('should display only the base directory name on a narrow terminal', () => {
-      const { lastFrame } = renderWithWidth(79, createMockUIState());
-      const expectedPath = path.basename(defaultProps.targetDir);
+      const pathLength = Math.max(20, Math.floor(79 * 0.25));
+      const expectedPath =
+        '...' + tildePath.slice(tildePath.length - pathLength + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
 
     it('should use wide layout at 80 columns', () => {
-      const { lastFrame } = renderWithWidth(80, createMockUIState());
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 80,
+        uiState: { ...sessionStats },
+      });
       const tildePath = tildeifyPath(defaultProps.targetDir);
-      const expectedPath = '...' + tildePath.slice(tildePath.length - 32 + 3);
+      const expectedPath =
+        '...' + tildePath.slice(tildePath.length - 80 * 0.25 + 3);
       expect(lastFrame()).toContain(expectedPath);
     });
-
-    it('should use narrow layout at 79 columns', () => {
-      const { lastFrame } = renderWithWidth(79, createMockUIState());
-      const expectedPath = path.basename(defaultProps.targetDir);
-      expect(lastFrame()).toContain(expectedPath);
-      const tildePath = tildeifyPath(defaultProps.targetDir);
-      const unexpectedPath = '...' + tildePath.slice(tildePath.length - 31 + 3);
-      expect(lastFrame()).not.toContain(unexpectedPath);
-    });
   });
 
   it('displays the branch name when provided', () => {
-    const { lastFrame } = renderWithWidth(120, createMockUIState());
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: { branchName: defaultProps.branchName, ...sessionStats },
+    });
     expect(lastFrame()).toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('does not display the branch name when not provided', () => {
-    const { lastFrame } = renderWithWidth(
-      120,
-      createMockUIState({
-        branchName: undefined,
-      }),
-    );
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: { branchName: undefined, ...sessionStats },
+    });
     expect(lastFrame()).not.toContain(`(${defaultProps.branchName}*)`);
   });
 
   it('displays the model name and context percentage', () => {
-    const { lastFrame } = renderWithWidth(120, createMockUIState());
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 120,
+      uiState: { ...sessionStats },
+    });
     expect(lastFrame()).toContain(defaultProps.model);
-    expect(lastFrame()).toMatch(/\(\d+% context[\s\S]*left\)/);
+    expect(lastFrame()).toMatch(/\(\d+% context left\)/);
+  });
+
+  it('displays the model name and abbreviated context percentage', () => {
+    const { lastFrame } = renderWithProviders(<Footer />, {
+      width: 99,
+      uiState: { ...sessionStats },
+    });
+    expect(lastFrame()).toContain(defaultProps.model);
+    expect(lastFrame()).toMatch(/\(\d+%\)/);
   });
 
   describe('sandbox and trust info', () => {
     it('should display untrusted when isTrustedFolder is false', () => {
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState({
-          isTrustedFolder: false,
-        }),
-      );
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { isTrustedFolder: false, ...sessionStats },
+      });
       expect(lastFrame()).toContain('untrusted');
     });
 
     it('should display custom sandbox info when SANDBOX env is set', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState({
-          isTrustedFolder: undefined,
-        }),
-      );
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { isTrustedFolder: undefined, ...sessionStats },
+      });
       expect(lastFrame()).toContain('test');
       vi.unstubAllEnvs();
     });
@@ -180,12 +126,10 @@ describe('<Footer />', () => {
     it('should display macOS Seatbelt info when SANDBOX is sandbox-exec', () => {
       vi.stubEnv('SANDBOX', 'sandbox-exec');
       vi.stubEnv('SEATBELT_PROFILE', 'test-profile');
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState({
-          isTrustedFolder: true,
-        }),
-      );
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { isTrustedFolder: true, ...sessionStats },
+      });
       expect(lastFrame()).toMatch(/macOS Seatbelt.*\(test-profile\)/s);
       vi.unstubAllEnvs();
     });
@@ -193,24 +137,20 @@ describe('<Footer />', () => {
     it('should display "no sandbox" when SANDBOX is not set and folder is trusted', () => {
       // Clear any SANDBOX env var that might be set.
       vi.stubEnv('SANDBOX', '');
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState({
-          isTrustedFolder: true,
-        }),
-      );
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { isTrustedFolder: true, ...sessionStats },
+      });
       expect(lastFrame()).toContain('no sandbox');
       vi.unstubAllEnvs();
     });
 
     it('should prioritize untrusted message over sandbox info', () => {
       vi.stubEnv('SANDBOX', 'gemini-cli-test-sandbox');
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState({
-          isTrustedFolder: false,
-        }),
-      );
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { isTrustedFolder: false, ...sessionStats },
+      });
       expect(lastFrame()).toContain('untrusted');
       expect(lastFrame()).not.toMatch(/test-sandbox/s);
       vi.unstubAllEnvs();
@@ -219,51 +159,69 @@ describe('<Footer />', () => {
 
   describe('footer configuration filtering (golden snapshots)', () => {
     it('renders complete footer with all sections visible (baseline)', () => {
-      const { lastFrame } = renderWithWidth(120, createMockUIState());
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { ...sessionStats },
+      });
       expect(lastFrame()).toMatchSnapshot('complete-footer-wide');
     });
 
     it('renders footer with all optional sections hidden (minimal footer)', () => {
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState(),
-        createDefaultSettings({
-          hideCWD: true,
-          hideSandboxStatus: true,
-          hideModelInfo: true,
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { ...sessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideCWD: true,
+              hideSandboxStatus: true,
+              hideModelInfo: true,
+            },
+          },
         }),
-      );
+      });
       expect(lastFrame()).toMatchSnapshot('footer-minimal');
     });
 
     it('renders footer with only model info hidden (partial filtering)', () => {
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState(),
-        createDefaultSettings({
-          hideCWD: false,
-          hideSandboxStatus: false,
-          hideModelInfo: true,
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { ...sessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideCWD: false,
+              hideSandboxStatus: false,
+              hideModelInfo: true,
+            },
+          },
         }),
-      );
+      });
       expect(lastFrame()).toMatchSnapshot('footer-no-model');
     });
 
     it('renders footer with CWD and model info hidden to test alignment (only sandbox visible)', () => {
-      const { lastFrame } = renderWithWidth(
-        120,
-        createMockUIState(),
-        createDefaultSettings({
-          hideCWD: true,
-          hideSandboxStatus: false,
-          hideModelInfo: true,
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 120,
+        uiState: { ...sessionStats },
+        settings: createMockSettings({
+          ui: {
+            footer: {
+              hideCWD: true,
+              hideSandboxStatus: false,
+              hideModelInfo: true,
+            },
+          },
         }),
-      );
+      });
       expect(lastFrame()).toMatchSnapshot('footer-only-sandbox');
     });
 
     it('renders complete footer in narrow terminal (baseline narrow)', () => {
-      const { lastFrame } = renderWithWidth(79, createMockUIState());
+      const { lastFrame } = renderWithProviders(<Footer />, {
+        width: 79,
+        uiState: { ...sessionStats },
+      });
       expect(lastFrame()).toMatchSnapshot('complete-footer-narrow');
     });
   });
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 44bc155bb5..65cc042f54 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -10,14 +10,10 @@ import { theme } from '../semantic-colors.js';
 import { shortenPath, tildeifyPath } from '@google/gemini-cli-core';
 import { ConsoleSummaryDisplay } from './ConsoleSummaryDisplay.js';
 import process from 'node:process';
-import path from 'node:path';
 import Gradient from 'ink-gradient';
 import { MemoryUsageDisplay } from './MemoryUsageDisplay.js';
 import { ContextUsageDisplay } from './ContextUsageDisplay.js';
 import { DebugProfiler } from './DebugProfiler.js';
-
-import { useTerminalSize } from '../hooks/useTerminalSize.js';
-import { isNarrowWidth } from '../utils/isNarrowWidth.js';
 import { isDevelopment } from '../../utils/installationInfo.js';
 
 import { useUIState } from '../contexts/UIStateContext.js';
@@ -43,6 +39,7 @@ export const Footer: React.FC = () => {
     promptTokenCount,
     nightly,
     isTrustedFolder,
+    mainAreaWidth,
   } = {
     model: config.getModel(),
     targetDir: config.getTargetDir(),
@@ -55,6 +52,7 @@ export const Footer: React.FC = () => {
     promptTokenCount: uiState.sessionStats.lastPromptTokenCount,
     nightly: uiState.nightly,
     isTrustedFolder: uiState.isTrustedFolder,
+    mainAreaWidth: uiState.mainAreaWidth,
   };
 
   const showMemoryUsage =
@@ -64,15 +62,8 @@ export const Footer: React.FC = () => {
     settings.merged.ui?.footer?.hideSandboxStatus || false;
   const hideModelInfo = settings.merged.ui?.footer?.hideModelInfo || false;
 
-  const { columns: terminalWidth } = useTerminalSize();
-
-  const isNarrow = isNarrowWidth(terminalWidth);
-
-  // Adjust path length based on terminal width
-  const pathLength = Math.max(20, Math.floor(terminalWidth * 0.4));
-  const displayPath = isNarrow
-    ? path.basename(tildeifyPath(targetDir))
-    : shortenPath(tildeifyPath(targetDir), pathLength);
+  const pathLength = Math.max(20, Math.floor(mainAreaWidth * 0.25));
+  const displayPath = shortenPath(tildeifyPath(targetDir), pathLength);
 
   const justifyContent = hideCWD && hideModelInfo ? 'center' : 'space-between';
   const displayVimMode = vimEnabled ? vimMode : undefined;
@@ -82,9 +73,10 @@ export const Footer: React.FC = () => {
   return (
     <Box
       justifyContent={justifyContent}
-      width="100%"
-      flexDirection={isNarrow ? 'column' : 'row'}
-      alignItems={isNarrow ? 'flex-start' : 'center'}
+      width={mainAreaWidth}
+      flexDirection="row"
+      alignItems="center"
+      paddingX={1}
     >
       {(showDebugProfiler || displayVimMode || !hideCWD) && (
         <Box>
@@ -119,12 +111,10 @@ export const Footer: React.FC = () => {
       {/* Middle Section: Centered Trust/Sandbox Info */}
       {!hideSandboxStatus && (
         <Box
-          flexGrow={isNarrow || hideCWD || hideModelInfo ? 0 : 1}
+          flexGrow={1}
           alignItems="center"
-          justifyContent={isNarrow || hideCWD ? 'flex-start' : 'center'}
+          justifyContent="center"
           display="flex"
-          paddingX={isNarrow ? 0 : 1}
-          paddingTop={isNarrow ? 1 : 0}
         >
           {isTrustedFolder === false ? (
             <Text color={theme.status.warning}>untrusted</Text>
@@ -142,45 +132,45 @@ export const Footer: React.FC = () => {
             </Text>
           ) : (
             <Text color={theme.status.error}>
-              no sandbox <Text color={theme.text.secondary}>(see /docs)</Text>
+              no sandbox
+              {mainAreaWidth >= 100 && (
+                <Text color={theme.text.secondary}> (see /docs)</Text>
+              )}
             </Text>
           )}
         </Box>
       )}
 
       {/* Right Section: Gemini Label and Console Summary */}
-      {(!hideModelInfo ||
-        showMemoryUsage ||
-        corgiMode ||
-        (!showErrorDetails && errorCount > 0)) && (
-        <Box alignItems="center" paddingTop={isNarrow ? 1 : 0}>
-          {!hideModelInfo && (
-            <Box alignItems="center">
-              <Text color={theme.text.accent}>
-                {isNarrow ? '' : ' '}
-                {model}{' '}
-                <ContextUsageDisplay
-                  promptTokenCount={promptTokenCount}
-                  model={model}
-                />
-              </Text>
-              {showMemoryUsage && <MemoryUsageDisplay />}
-            </Box>
-          )}
-          <Box alignItems="center" paddingLeft={2}>
+      {!hideModelInfo && (
+        <Box alignItems="center" justifyContent="flex-end">
+          <Box alignItems="center">
+            <Text color={theme.text.accent}>
+              {model}{' '}
+              <ContextUsageDisplay
+                promptTokenCount={promptTokenCount}
+                model={model}
+                terminalWidth={mainAreaWidth}
+              />
+            </Text>
+            {showMemoryUsage && <MemoryUsageDisplay />}
+          </Box>
+          <Box alignItems="center">
             {corgiMode && (
-              <Text>
-                {!hideModelInfo && <Text color={theme.ui.comment}>| </Text>}
-                <Text color={theme.status.error}>▼</Text>
-                <Text color={theme.text.primary}>(´</Text>
-                <Text color={theme.status.error}>ᴥ</Text>
-                <Text color={theme.text.primary}>`)</Text>
-                <Text color={theme.status.error}>▼ </Text>
-              </Text>
+              <Box paddingLeft={1} flexDirection="row">
+                <Text>
+                  <Text color={theme.ui.symbol}>| </Text>
+                  <Text color={theme.status.error}>▼</Text>
+                  <Text color={theme.text.primary}>(´</Text>
+                  <Text color={theme.status.error}>ᴥ</Text>
+                  <Text color={theme.text.primary}>`)</Text>
+                  <Text color={theme.status.error}>▼</Text>
+                </Text>
+              </Box>
             )}
             {!showErrorDetails && errorCount > 0 && (
-              <Box>
-                {!hideModelInfo && <Text color={theme.ui.comment}>| </Text>}
+              <Box paddingLeft={1} flexDirection="row">
+                <Text color={theme.ui.symbol}>| </Text>
                 <ConsoleSummaryDisplay errorCount={errorCount} />
               </Box>
             )}
diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx
index c0ac908e20..a4a5c35fe4 100644
--- a/packages/cli/src/ui/components/InputPrompt.tsx
+++ b/packages/cli/src/ui/components/InputPrompt.tsx
@@ -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}
diff --git a/packages/cli/src/ui/components/MainContent.tsx b/packages/cli/src/ui/components/MainContent.tsx
index fc6c216fac..c193bb0d7b 100644
--- a/packages/cli/src/ui/components/MainContent.tsx
+++ b/packages/cli/src/ui/components/MainContent.tsx
@@ -50,7 +50,7 @@ export const MainContent = () => {
         {(item) => item}
       </Static>
       <OverflowProvider>
-        <Box flexDirection="column">
+        <Box flexDirection="column" width={mainAreaWidth}>
           {pendingHistoryItems.map((item, i) => (
             <HistoryItemDisplay
               key={i}
diff --git a/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap
index 8c6553c33d..72203200a4 100644
--- a/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap
+++ b/packages/cli/src/ui/components/__snapshots__/Footer.test.tsx.snap
@@ -1,20 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `
-"long (main*)
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer in narrow terminal (baseline narrow) > complete-footer-narrow 1`] = `" ...s/to/make/it/long              no sandbox              gemini-pro (100%)"`;
 
-no sandbox (see /docs)
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `" ...ectories/to/make/it/long              no sandbox (see /docs)               gemini-pro (100% context left)"`;
 
-gemini-pro (100% context left)"
-`;
-
-exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders complete footer with all sections visible (baseline) > complete-footer-wide 1`] = `
-"...bar/and/some/more/directories/to/make/it/long    no sandbox (see     gemini-pro (100% context
-(main*)                                             /docs)             left)"
-`;
-
-exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with CWD and model info hidden to test alignment (only sandbox visible) > footer-only-sandbox 1`] = `"                                       no sandbox (see /docs)"`;
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with CWD and model info hidden to test alignment (only sandbox visible) > footer-only-sandbox 1`] = `"                                            no sandbox (see /docs)"`;
 
 exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with all optional sections hidden (minimal footer) > footer-minimal 1`] = `""`;
 
-exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with only model info hidden (partial filtering) > footer-no-model 1`] = `"...bar/and/some/more/directories/to/make/it/long (main*)                     no sandbox (see /docs)"`;
+exports[`<Footer /> > footer configuration filtering (golden snapshots) > renders footer with only model info hidden (partial filtering) > footer-no-model 1`] = `" ...ectories/to/make/it/long                             no sandbox (see /docs)"`;
diff --git a/packages/cli/src/ui/components/__snapshots__/InputPrompt.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/InputPrompt.test.tsx.snap
index 9ae6eab1c9..5ce22ac941 100644
--- a/packages/cli/src/ui/components/__snapshots__/InputPrompt.test.tsx.snap
+++ b/packages/cli/src/ui/components/__snapshots__/InputPrompt.test.tsx.snap
@@ -1,57 +1,57 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputPrompt > command search (Ctrl+R when not in shell) > expands and collapses long suggestion via Right/Left arrows > command-search-collapsed-match 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ (r:)    Type your message or @path/to/file                                                       │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)    Type your message or @path/to/file                                                        │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll →
  lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
  ..."
 `;
 
 exports[`InputPrompt > command search (Ctrl+R when not in shell) > expands and collapses long suggestion via Right/Left arrows > command-search-expanded-match 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ (r:)    Type your message or @path/to/file                                                       │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)    Type your message or @path/to/file                                                        │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll ←
  lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
  llllllllllllllllllllllllllllllllllllllllllllllllll"
 `;
 
 exports[`InputPrompt > command search (Ctrl+R when not in shell) > renders match window and expanded view (snapshots) > command-search-collapsed-match 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ (r:)  commit                                                                                     │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)  commit                                                                                      │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  git commit -m "feat: add search" in src/app"
 `;
 
 exports[`InputPrompt > command search (Ctrl+R when not in shell) > renders match window and expanded view (snapshots) > command-search-expanded-match 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ (r:)  commit                                                                                     │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ (r:)  commit                                                                                      │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
  git commit -m "feat: add search" in src/app"
 `;
 
 exports[`InputPrompt > snapshots > should not show inverted cursor when shell is focused 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ >   Type your message or @path/to/file                                                           │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ >   Type your message or @path/to/file                                                            │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`InputPrompt > snapshots > should render correctly in shell mode 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ !   Type your message or @path/to/file                                                           │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ !   Type your message or @path/to/file                                                            │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`InputPrompt > snapshots > should render correctly in yolo mode 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ *   Type your message or @path/to/file                                                           │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ *   Type your message or @path/to/file                                                            │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`InputPrompt > snapshots > should render correctly when accepting edits 1`] = `
-"╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
-│ >   Type your message or @path/to/file                                                           │
-╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
+│ >   Type your message or @path/to/file                                                            │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────────────╯"
 `;
diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index bc00cefecd..612ba40076 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
@@ -131,7 +131,7 @@ export const ToolConfirmationMessage: React.FC<
     if (confirmationDetails.isModifying) {
       return (
         <Box
-          minWidth="90%"
+          width={terminalWidth}
           borderStyle="round"
           borderColor={theme.border.default}
           justifyContent="space-around"
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 70d58fbc32..2c2c6e138b 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
@@ -96,8 +96,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
         Ink to render the border of the box incorrectly and span multiple lines and even
         cause tearing.
       */
-      width="100%"
-      marginLeft={1}
+      width={terminalWidth}
       borderDimColor={
         hasPending && (!isShellCommand || !isEmbeddedShellFocused)
       }
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index d563ee8cfd..a65ac2f9ec 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx
@@ -171,6 +171,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
               <AnsiOutputText
                 data={resultDisplay as AnsiOutput}
                 availableTerminalHeight={availableHeight}
+                width={childWidth}
               />
             )}
           </Box>
diff --git a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
index ee798b6718..4dbd1c399f 100644
--- a/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
+++ b/packages/cli/src/ui/components/messages/__snapshots__/ToolGroupMessage.test.tsx.snap
@@ -1,105 +1,108 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`<ToolGroupMessage /> > Border Color Logic > uses gray border when all tools are successful and no shell commands 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                                     │
- │                                                                                                  │
- │MockTool[tool-2]: ✓ another-tool - A tool for testing (medium)                                    │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                 │
+│                                                                              │
+│MockTool[tool-2]: ✓ another-tool - A tool for testing (medium)                │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Border Color Logic > uses yellow border for shell commands even when successful 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: ✓ run_shell_command - A tool for testing (medium)                             │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-123]: ✓ run_shell_command - A tool for testing (medium)         │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Border Color Logic > uses yellow border when tools are pending 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: o test-tool - A tool for testing (medium)                                     │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-123]: o test-tool - A tool for testing (medium)                 │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Confirmation Handling > shows confirmation dialog for first confirming tool only 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-1]: ? first-confirm - A tool for testing (high)                                     │
- │MockConfirmation: Confirm first tool                                                              │
- │                                                                                                  │
- │MockTool[tool-2]: ? second-confirm - A tool for testing (low)                                     │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-1]: ? first-confirm - A tool for testing (high)                 │
+│MockConfirmation: Confirm first tool                                          │
+│                                                                              │
+│MockTool[tool-2]: ? second-confirm - A tool for testing (low)                 │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders empty tool calls array 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders mixed tool calls including shell command 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-1]: ✓ read_file - Read a file (medium)                                              │
- │                                                                                                  │
- │MockTool[tool-2]: ⊷ run_shell_command - Run command (medium)                                      │
- │                                                                                                  │
- │MockTool[tool-3]: o write_file - Write to file (medium)                                           │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-1]: ✓ read_file - Read a file (medium)                          │
+│                                                                              │
+│MockTool[tool-2]: ⊷ run_shell_command - Run command (medium)                  │
+│                                                                              │
+│MockTool[tool-3]: o write_file - Write to file (medium)                       │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders multiple tool calls with different statuses 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-1]: ✓ successful-tool - This tool succeeded (medium)                                │
- │                                                                                                  │
- │MockTool[tool-2]: o pending-tool - This tool is pending (medium)                                  │
- │                                                                                                  │
- │MockTool[tool-3]: x error-tool - This tool failed (medium)                                        │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-1]: ✓ successful-tool - This tool succeeded (medium)            │
+│                                                                              │
+│MockTool[tool-2]: o pending-tool - This tool is pending (medium)              │
+│                                                                              │
+│MockTool[tool-3]: x error-tool - This tool failed (medium)                    │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders shell command with yellow border 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[shell-1]: ✓ run_shell_command - Execute shell command (medium)                           │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[shell-1]: ✓ run_shell_command - Execute shell command (medium)       │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders single successful tool call 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                                     │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                 │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders tool call awaiting confirmation 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-confirm]: ? confirmation-tool - This tool needs confirmation (high)                 │
- │MockConfirmation: Are you sure you want to proceed?                                               │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-confirm]: ? confirmation-tool - This tool needs confirmation    │
+│(high)                                                                        │
+│MockConfirmation: Are you sure you want to proceed?                           │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders when not focused 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                                     │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-123]: ✓ test-tool - A tool for testing (medium)                 │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders with limited terminal height 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-1]: ✓ tool-with-result - Tool with output (medium)                                  │
- │                                                                                                  │
- │MockTool[tool-2]: ✓ another-tool - Another tool (medium)                                          │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-1]: ✓ tool-with-result - Tool with output (medium)              │
+│                                                                              │
+│MockTool[tool-2]: ✓ another-tool - Another tool (medium)                      │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Golden Snapshots > renders with narrow terminal width 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-123]: ✓ very-long-tool-name-that-might-wrap - This is a very long description that  │
- │might cause wrapping issues (medium)                                                              │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────╮
+│MockTool[tool-123]: ✓                 │
+│very-long-tool-name-that-might-wrap - │
+│This is a very long description that  │
+│might cause wrapping issues (medium)  │
+╰──────────────────────────────────────╯"
 `;
 
 exports[`<ToolGroupMessage /> > Height Calculation > calculates available height correctly with multiple tools with results 1`] = `
-" ╭──────────────────────────────────────────────────────────────────────────────────────────────────╮
- │MockTool[tool-1]: ✓ test-tool - A tool for testing (medium)                                       │
- │                                                                                                  │
- │MockTool[tool-2]: ✓ test-tool - A tool for testing (medium)                                       │
- │                                                                                                  │
- │MockTool[tool-3]: ✓ test-tool - A tool for testing (medium)                                       │
- ╰──────────────────────────────────────────────────────────────────────────────────────────────────╯"
+"╭──────────────────────────────────────────────────────────────────────────────╮
+│MockTool[tool-1]: ✓ test-tool - A tool for testing (medium)                   │
+│                                                                              │
+│MockTool[tool-2]: ✓ test-tool - A tool for testing (medium)                   │
+│                                                                              │
+│MockTool[tool-3]: ✓ test-tool - A tool for testing (medium)                   │
+╰──────────────────────────────────────────────────────────────────────────────╯"
 `;
diff --git a/packages/cli/src/ui/hooks/useTerminalSize.ts b/packages/cli/src/ui/hooks/useTerminalSize.ts
index f043a1180b..85cee6117a 100644
--- a/packages/cli/src/ui/hooks/useTerminalSize.ts
+++ b/packages/cli/src/ui/hooks/useTerminalSize.ts
@@ -6,18 +6,16 @@
 
 import { useEffect, useState } from 'react';
 
-const TERMINAL_PADDING_X = 8;
-
 export function useTerminalSize(): { columns: number; rows: number } {
   const [size, setSize] = useState({
-    columns: (process.stdout.columns || 60) - TERMINAL_PADDING_X,
+    columns: process.stdout.columns || 60,
     rows: process.stdout.rows || 20,
   });
 
   useEffect(() => {
     function updateSize() {
       setSize({
-        columns: (process.stdout.columns || 60) - TERMINAL_PADDING_X,
+        columns: process.stdout.columns || 60,
         rows: process.stdout.rows || 20,
       });
     }
diff --git a/packages/cli/src/ui/layouts/DefaultAppLayout.tsx b/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
index 1fd980e387..b0835ec77b 100644
--- a/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
+++ b/packages/cli/src/ui/layouts/DefaultAppLayout.tsx
@@ -17,7 +17,7 @@ export const DefaultAppLayout: React.FC = () => {
   const uiState = useUIState();
 
   return (
-    <Box flexDirection="column" width="90%">
+    <Box flexDirection="column" width={uiState.mainAreaWidth}>
       <MainContent />
 
       <Box flexDirection="column" ref={uiState.mainControlsRef}>
@@ -25,7 +25,7 @@ export const DefaultAppLayout: React.FC = () => {
 
         {uiState.dialogsVisible ? (
           <DialogManager
-            terminalWidth={uiState.terminalWidth}
+            terminalWidth={uiState.mainAreaWidth}
             addItem={uiState.historyManager.addItem}
           />
         ) : (
diff --git a/packages/cli/src/ui/utils/ui-sizing.ts b/packages/cli/src/ui/utils/ui-sizing.ts
new file mode 100644
index 0000000000..0ea0629fab
--- /dev/null
+++ b/packages/cli/src/ui/utils/ui-sizing.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { lerp } from '../../utils/math.js';
+import { type LoadedSettings } from '../../config/settings.js';
+
+const getMainAreaWidthInternal = (terminalWidth: number): number => {
+  if (terminalWidth <= 80) {
+    return Math.round(0.98 * terminalWidth);
+  }
+  if (terminalWidth >= 132) {
+    return Math.round(0.9 * terminalWidth);
+  }
+
+  // Linearly interpolate between 80 columns (98%) and 132 columns (90%).
+  const t = (terminalWidth - 80) / (132 - 80);
+  const percentage = lerp(98, 90, t);
+
+  return Math.round(percentage * terminalWidth * 0.01);
+};
+
+export const calculateMainAreaWidth = (
+  terminalWidth: number,
+  settings: LoadedSettings,
+): number =>
+  settings.merged.ui?.useFullWidth
+    ? terminalWidth
+    : getMainAreaWidthInternal(terminalWidth);
diff --git a/packages/cli/src/utils/math.ts b/packages/cli/src/utils/math.ts
new file mode 100644
index 0000000000..f067a4ef95
--- /dev/null
+++ b/packages/cli/src/utils/math.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+/**
+ * Linearly interpolates between two values.
+ *
+ * @param start The start value.
+ * @param end The end value.
+ * @param t The interpolation amount (typically between 0 and 1).
+ */
+export const lerp = (start: number, end: number, t: number): number =>
+  start + (end - start) * t;