From b6699fa047358cbbc6ae56b391138ff4553b4968 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Tue, 19 Mar 2024 22:43:15 -0400
Subject: [PATCH] Bug Fix: UI layout changes as you switch between tabs (#58)

* Fix UI layout change bug

* Reword comment
---
 frontend/src/components/Terminal.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/components/Terminal.tsx b/frontend/src/components/Terminal.tsx
index 33d7eb17f8..12346e04b2 100644
--- a/frontend/src/components/Terminal.tsx
+++ b/frontend/src/components/Terminal.tsx
@@ -9,6 +9,12 @@ function Terminal(): JSX.Element {
   const WS_URL = import.meta.env.VITE_TERMINAL_WS_URL;
   useEffect(() => {
     const terminal = new XtermTerminal({
+      // This value is set to the appropriate value by the
+      // `fitAddon.fit()` call below.
+      // If not set here, the terminal does not respect the width
+      // of its parent element. This causes a bug where the terminal
+      // is too large and switching tabs causes a layout shift.
+      cols: 0,
       fontFamily: "Menlo, Monaco, 'Courier New', monospace",
       fontSize: 14,
     });