Apply min col on logs terminal for colab (#2260)

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -29,7 +29,12 @@ const terminalCreated = (
   { terminal, useAutoSize }: ReturnType<typeof useTerminal>,
   root: Ref<HTMLElement>
 ) => {
-  useAutoSize({ root, autoRows: true, autoCols: false })
+  // `autoCols` is false because we don't want the progress bar in the terminal
+  // to render incorrectly as the progress bar is rendered based on the
+  // server's terminal size.
+  // Apply a min cols of 80 for colab environments
+  // See https://github.com/comfyanonymous/ComfyUI/issues/6396
+  useAutoSize({ root, autoRows: true, autoCols: false, minCols: 80 })
 
   const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
     if (size) {

src/hooks/bottomPanelTabs/useTerminal.ts

@@ -40,11 +40,15 @@ export function useTerminal(element: Ref<HTMLElement>) {
       root,
       autoRows = true,
       autoCols = true,
+      minCols = Number.NEGATIVE_INFINITY,
+      minRows = Number.NEGATIVE_INFINITY,
       onResize
     }: {
       root: Ref<HTMLElement>
       autoRows?: boolean
       autoCols?: boolean
+      minCols?: number
+      minRows?: number
       onResize?: () => void
     }) {
       const ensureValidRows = (rows: number | undefined) => {
@@ -66,8 +70,14 @@ export function useTerminal(element: Ref<HTMLElement>) {
         const dims = fitAddon.proposeDimensions()
         // Sometimes propose returns NaN, so we may need to estimate.
         terminal.resize(
-          autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
-          autoRows ? ensureValidRows(dims?.rows) : terminal.rows
+          Math.max(
+            autoCols ? ensureValidCols(dims?.cols) : terminal.cols,
+            minCols
+          ),
+          Math.max(
+            autoRows ? ensureValidRows(dims?.rows) : terminal.rows,
+            minRows
+          )
         )
         onResize?.()
       }