From mboxrd@z Thu Jan  1 00:00:00 1970
Return-Path: <pve-devel-bounces@lists.proxmox.com>
Received: from gate001.proxmox.com (gate001.proxmox.com [IPv6:2a0f:8001:1:32::40])
	by lore.proxmox.com (Postfix) with ESMTPS id C21271FF0A7
	for <inbox@lore.proxmox.com>; Wed, 02 Sep 2026 09:43:58 +0200 (CEST)
Received: from gate001.proxmox.com (localhost.localdomain [127.0.0.1])
	by gate001.proxmox.com (Proxmox) with ESMTP id 1A29C214DF;
	Wed, 02 Sep 2026 09:43:44 +0200 (CEST)
From: Dominik Csapak <d.csapak@proxmox.com>
To: pve-devel@lists.proxmox.com
Subject: [PATCH pve-xtermjs 3/3] xterm.js: fix obstructed start button
Date: Wed,  2 Sep 2026 09:40:39 +0200
Message-ID: <20260902074338.914500-4-d.csapak@proxmox.com>
X-Mailer: git-send-email 2.47.3
In-Reply-To: <20260902074338.914500-1-d.csapak@proxmox.com>
References: <20260902074338.914500-1-d.csapak@proxmox.com>
MIME-Version: 1.0
Content-Transfer-Encoding: 8bit
X-SPAM-LEVEL: Spam detection results:  0
	AWL                     0.573 Adjusted score from AWL reputation of From:
 address
	DMARC_MISSING             0.1 Missing DMARC policy
	KAM_DMARC_STATUS         0.01 Test Rule for DKIM or SPF Failure with Strict
 Alignment (newer systems)
	RCVD_IN_DNSWL_MED        -2.3 Sender listed at https://www.dnswl.org/,
 medium trust
	SPF_HELO_NONE           0.001 SPF: HELO does not publish an SPF Record
	SPF_PASS               -0.001 SPF: sender matches SPF record
Message-ID-Hash: AYWYWTFYVT4VH3JI6DNE5SYIW5VEAOPG
X-Message-ID-Hash: AYWYWTFYVT4VH3JI6DNE5SYIW5VEAOPG
X-MailFrom: d.csapak@proxmox.com
X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop;
 banned-address; emergency; member-moderation; nonmember-moderation;
 administrivia; implicit-dest; max-recipients; max-size; news-moderation;
 no-subject; digests; suspicious-header
X-Mailman-Version: 3.3.10
Precedence: list
List-Id: Proxmox VE development discussion <pve-devel.lists.proxmox.com>
List-Help: <mailto:pve-devel-request@lists.proxmox.com?subject=help>
List-Owner: <mailto:pve-devel-owner@lists.proxmox.com>
List-Post: <mailto:pve-devel@lists.proxmox.com>
List-Subscribe: <mailto:pve-devel-join@lists.proxmox.com>
List-Unsubscribe: <mailto:pve-devel-leave@lists.proxmox.com>

Depending on the window height, the xterm.js container sometimes
overlapped the 'start now' button in case a guest is not running. This
made it impossible to press that button.

Fix this by adding a 'display: none' CSS style when the terminal is
disconnected.

Reported in the forum:
https://forum.proxmox.com/threads/186055/

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 xterm.js/src/index.html.hbs.in |  2 +-
 xterm.js/src/index.html.tpl.in |  2 +-
 xterm.js/src/main.js           | 26 ++++++++++++++++++++++++--
 xterm.js/src/style.css         |  4 ++++
 4 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/xterm.js/src/index.html.hbs.in b/xterm.js/src/index.html.hbs.in
index 9857e9d..20c5814 100644
--- a/xterm.js/src/index.html.hbs.in
+++ b/xterm.js/src/index.html.hbs.in
@@ -18,7 +18,7 @@
 		<div id="connect_btn"><div> Start Now </div></div>
 	    </div>
 	</div>
-	<div id="terminal-container"></div>
+	<div id="terminal-container" class="disconnected"></div>
 	</div>
 	<script type="text/javascript">
 	    if (typeof(PVE) === 'undefined') PVE = {};
diff --git a/xterm.js/src/index.html.tpl.in b/xterm.js/src/index.html.tpl.in
index 0084158..2d36c0e 100644
--- a/xterm.js/src/index.html.tpl.in
+++ b/xterm.js/src/index.html.tpl.in
@@ -18,7 +18,7 @@
 		<div id="connect_btn"><div> Start Now </div></div>
 	    </div>
 	</div>
-	<div id="terminal-container"></div>
+	<div id="terminal-container" class="disconnected"></div>
 	</div>
 	<script type="text/javascript">
 	    if (typeof(PVE) === 'undefined') PVE = {};
diff --git a/xterm.js/src/main.js b/xterm.js/src/main.js
index e9097f1..66b00fa 100644
--- a/xterm.js/src/main.js
+++ b/xterm.js/src/main.js
@@ -47,36 +47,56 @@ function getBaseUrl() {
     return baseUrl;
 }
 
+function clearClasses(element) {
+    if (!element) {
+        return;
+    }
+
+    element.classList.values().forEach((cls) => element.classList.remove(cls));
+}
+
+function addClass(element, cls) {
+    if (!element || !cls) {
+        return;
+    }
+    element.classList.add(cls);
+}
+
 const baseUrl = getBaseUrl();
 const statusUrlSuffix = remote ? '/status' : '/status/current';
 const startUrlSuffix = remote ? '/start' : '/status/start';
 
 function updateState(newState, msg, code) {
-    var timeout, severity, message;
+    var timeout, severity, message, cls;
     switch (newState) {
         case states.connecting:
+            cls = 'connecting';
             message = 'Connecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.connected:
             window.onbeforeunload = windowUnload;
+            cls = 'connected';
             message = 'Connected';
             break;
         case states.disconnecting:
             window.onbeforeunload = undefined;
+            cls = 'disconnected';
             message = 'Disconnecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.reconnecting:
             window.onbeforeunload = undefined;
+            cls = 'reconnecting';
             message = 'Reconnecting...';
             timeout = 0;
             severity = severities.warning;
             break;
         case states.disconnected:
             window.onbeforeunload = undefined;
+            cls = 'disconnected';
             switch (state) {
                 case states.start:
                 case states.connecting:
@@ -106,6 +126,8 @@ function updateState(newState, msg, code) {
         default:
             throw 'unknown state';
     }
+    clearClasses(terminalContainer);
+    addClass(terminalContainer, cls);
     let msgArr = [];
     if (msg) {
         msgArr.push(msg);
@@ -227,7 +249,7 @@ function createTerminal() {
                 if (result.data.status === 'running') {
                     startConnection(params, term);
                 } else {
-                    document.getElementById('connect_dlg').classList.add('pve_open');
+                    addClass(document.getElementById('connect_dlg'), 'pve_open');
                 }
             },
             failure: function (msg) {
diff --git a/xterm.js/src/style.css b/xterm.js/src/style.css
index 7962ae3..001b4c7 100644
--- a/xterm.js/src/style.css
+++ b/xterm.js/src/style.css
@@ -36,6 +36,10 @@ body {
     width: auto;
 }
 
+#terminal-container.disconnected {
+    display: none;
+}
+
 #wrap {
     height: 100%;
     width: auto;
-- 
2.47.3