Skip to content

Commit 643533c

Browse files
authored
fix: should allow autoCols=true when server doesn't provide size (#7132)
## Summary set autoCols = true by default for Logs Terminal ## Changes Previously, the logs terminal had autoCols: false to preserve server-side progress bar rendering, However, this caused large black empty areas when the server terminal was narrower than the UI panel, Many server environments don't provide terminal size at all, making this tradeoff not worthwhile. The original implementation set autoCols: false because the server renders progress bars based on its own terminal width. If the frontend used a different column count, progress bars would display incorrectly (e.g., wrapped or truncated). However, this created a poor user experience: 1. The terminal only filled a portion of the panel width (often 80 columns) 2. The remaining space appeared as a large black empty area 3. Many backend environments don't provide size data at all, making the fixed-width approach pointless fix #7117 ## Screenshots (if applicable) before https://github.com/user-attachments/assets/e38af410-9cf1-4175-8acc-39d11a5b73ce after https://github.com/user-attachments/assets/3d180318-609f-44c5-aac5-230f9e4ef596 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7132-fix-should-allow-autoCols-true-when-server-doesn-t-provide-size-2be6d73d365081e7bf3bf5988bdba39a) by [Unito](https://www.unito.io)
1 parent 8b5e43d commit 643533c

File tree

1 file changed

+7
-12
lines changed

1 file changed

+7
-12
lines changed

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

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type { Ref } from 'vue'
1919
import { onMounted, onUnmounted, ref } from 'vue'
2020
2121
import type { useTerminal } from '@/composables/bottomPanelTabs/useTerminal'
22-
import type { LogEntry, LogsWsMessage, TerminalSize } from '@/schemas/apiSchema'
22+
import type { LogEntry, LogsWsMessage } from '@/schemas/apiSchema'
2323
import { api } from '@/scripts/api'
2424
import { useExecutionStore } from '@/stores/executionStore'
2525
@@ -32,27 +32,22 @@ const terminalCreated = (
3232
{ terminal, useAutoSize }: ReturnType<typeof useTerminal>,
3333
root: Ref<HTMLElement | undefined>
3434
) => {
35-
// `autoCols` is false because we don't want the progress bar in the terminal
36-
// to render incorrectly as the progress bar is rendered based on the
37-
// server's terminal size.
38-
// Apply a min cols of 80 for colab environments
35+
// Auto-size terminal to fill container width.
36+
// minCols: 80 ensures minimum width for colab environments.
3937
// See https://github.com/comfyanonymous/ComfyUI/issues/6396
40-
useAutoSize({ root, autoRows: true, autoCols: false, minCols: 80 })
38+
useAutoSize({ root, autoRows: true, autoCols: true, minCols: 80 })
4139
42-
const update = (entries: Array<LogEntry>, size?: TerminalSize) => {
43-
if (size) {
44-
terminal.resize(size.cols, terminal.rows)
45-
}
40+
const update = (entries: Array<LogEntry>) => {
4641
terminal.write(entries.map((e) => e.m).join(''))
4742
}
4843
4944
const logReceived = (e: CustomEvent<LogsWsMessage>) => {
50-
update(e.detail.entries, e.detail.size)
45+
update(e.detail.entries)
5146
}
5247
5348
const loadLogEntries = async () => {
5449
const logs = await api.getRawLogs()
55-
update(logs.entries, logs.size)
50+
update(logs.entries)
5651
}
5752
5853
const watchLogs = async () => {

0 commit comments

Comments
 (0)