From d1af7c8256cdca0b4be431083be015c154bd7ff1 Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Tue, 14 Oct 2025 13:26:35 -0700
Subject: [PATCH] fix terminal style (#6056)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 src/composables/bottomPanelTabs/useTerminal.ts | 4 +++-
 src/platform/distribution/types.ts             | 6 ++++--
 vitest.setup.ts                                | 1 +
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/composables/bottomPanelTabs/useTerminal.ts b/src/composables/bottomPanelTabs/useTerminal.ts
index d353294f0..ed7fb3fa8 100644
--- a/src/composables/bottomPanelTabs/useTerminal.ts
+++ b/src/composables/bottomPanelTabs/useTerminal.ts
@@ -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)
diff --git a/src/platform/distribution/types.ts b/src/platform/distribution/types.ts
index 8da710973..2ddeb1343 100644
--- a/src/platform/distribution/types.ts
+++ b/src/platform/distribution/types.ts
@@ -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
diff --git a/vitest.setup.ts b/vitest.setup.ts
index 56b24693e..86e72cf52 100644
--- a/vitest.setup.ts
+++ b/vitest.setup.ts
@@ -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(() => ({