fix terminal style (#6056)

## Summary

After #5292, at certain browser zoom levels, the xterm terminal did not
fill horizontal space properly, showing a gap with mismatched background
colors (`#171717` viewport vs `black` terminal content).

Fixes https://github.com/Comfy-Org/ComfyUI_frontend/issues/6049

## Problem

The hardcoded `#171717` terminal theme background only affected the
xterm viewport, while terminal content remained black, causing a visible
color mismatch at low zoom levels where the gap was more apparent.

Fixed by keeping original theme when not on desktop distribution.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6056-fix-terminal-style-28c6d73d36508132b521e5767f41d540)
by [Unito](https://www.unito.io)
This commit is contained in:
Christian Byrne
2025-10-14 13:26:35 -07:00
committed by GitHub
parent 5bc7c8a5c2
commit d1af7c8256
3 changed files with 8 additions and 3 deletions

View File

@@ -5,12 +5,14 @@ import { debounce } from 'es-toolkit/compat'
import type { Ref } from 'vue'
import { markRaw, onMounted, onUnmounted } from 'vue'
import { isDesktop } from '@/platform/distribution/types'
export function useTerminal(element: Ref<HTMLElement | undefined>) {
const fitAddon = new FitAddon()
const terminal = markRaw(
new Terminal({
convertEol: true,
theme: { background: '#171717' }
theme: isDesktop ? { background: '#171717' } : undefined
})
)
terminal.loadAddon(fitAddon)

View File

@@ -1,3 +1,5 @@
import { isElectron } from '@/utils/envUtil'
/**
* Distribution types and compile-time constants for managing
* multi-distribution builds (Desktop, Localhost, Cloud)
@@ -13,6 +15,6 @@ declare global {
const DISTRIBUTION: Distribution = __DISTRIBUTION__
/** Distribution type checks */
// const isDesktop = DISTRIBUTION === 'desktop'
// const isLocalhost = DISTRIBUTION === 'localhost'
export const isDesktop = DISTRIBUTION === 'desktop' || isElectron() // TODO: replace with build var
export const isCloud = DISTRIBUTION === 'cloud'
// export const isLocalhost = !isDesktop && !isCloud

View File

@@ -8,6 +8,7 @@ globalThis.__SENTRY_DSN__ = ''
globalThis.__ALGOLIA_APP_ID__ = ''
globalThis.__ALGOLIA_API_KEY__ = ''
globalThis.__USE_PROD_CONFIG__ = false
globalThis.__DISTRIBUTION__ = 'localhost'
// Mock Worker for extendable-media-recorder
globalThis.Worker = vi.fn().mockImplementation(() => ({