From b0bc7c3d996d25c9fefdfbcba3ca19fa46ad199f Mon Sep 17 00:00:00 2001
From: Jacob Richman <jacob314@gmail.com>
Date: Thu, 19 Jun 2025 20:17:23 +0000
Subject: Fix flicker issues by ensuring all actively changing content fits in
 the viewport (#1217)

---
 packages/cli/src/ui/components/ThemeDialog.tsx | 36 ++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

(limited to 'packages/cli/src/ui/components/ThemeDialog.tsx')

diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx
index eeccee4c..1fa6bee8 100644
--- a/packages/cli/src/ui/components/ThemeDialog.tsx
+++ b/packages/cli/src/ui/components/ThemeDialog.tsx
@@ -21,12 +21,16 @@ interface ThemeDialogProps {
   onHighlight: (themeName: string | undefined) => void;
   /** The settings object */
   settings: LoadedSettings;
+  availableTerminalHeight?: number;
+  terminalWidth: number;
 }
 
 export function ThemeDialog({
   onSelect,
   onHighlight,
   settings,
+  availableTerminalHeight,
+  terminalWidth,
 }: ThemeDialogProps): React.JSX.Element {
   const [selectedScope, setSelectedScope] = useState<SettingScope>(
     SettingScope.User,
@@ -94,6 +98,34 @@ export function ThemeDialog({
         : `(Modified in ${otherScope})`;
   }
 
+  // Constants for calculating preview pane layout.
+  // These values are based on the JSX structure below.
+  const PREVIEW_PANE_WIDTH_PERCENTAGE = 0.55;
+  // A safety margin to prevent text from touching the border.
+  // This is a complete hack unrelated to the 0.9 used in App.tsx
+  const PREVIEW_PANE_WIDTH_SAFETY_MARGIN = 0.9;
+  // Combined horizontal padding from the dialog and preview pane.
+  const TOTAL_HORIZONTAL_PADDING = 4;
+  const colorizeCodeWidth = Math.max(
+    Math.floor(
+      (terminalWidth - TOTAL_HORIZONTAL_PADDING) *
+        PREVIEW_PANE_WIDTH_PERCENTAGE *
+        PREVIEW_PANE_WIDTH_SAFETY_MARGIN,
+    ),
+    1,
+  );
+
+  // Vertical space taken by elements other than the two code blocks in the preview pane.
+  // Includes "Preview" title, borders, padding, and margin between blocks.
+  const PREVIEW_PANE_FIXED_VERTICAL_SPACE = 7;
+  const availableTerminalHeightCodeBlock = availableTerminalHeight
+    ? Math.max(
+        Math.floor(
+          (availableTerminalHeight - PREVIEW_PANE_FIXED_VERTICAL_SPACE) / 2,
+        ),
+        2,
+      )
+    : undefined;
   return (
     <Box
       borderStyle="round"
@@ -155,6 +187,8 @@ def fibonacci(n):
         a, b = b, a + b
     return a`,
             'python',
+            availableTerminalHeightCodeBlock,
+            colorizeCodeWidth,
           )}
           <Box marginTop={1} />
           <DiffRenderer
@@ -165,6 +199,8 @@ def fibonacci(n):
 -This line was deleted.
 +This line was added.
 `}
+            availableTerminalHeight={availableTerminalHeightCodeBlock}
+            terminalWidth={colorizeCodeWidth}
           />
         </Box>
       </Box>
-- 
cgit v1.2.3