mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
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:
@@ -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)
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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(() => ({
|
||||
|
||||
Reference in New Issue
Block a user