From 0a041c2caa6ed7810ccf76cd6fa11851e79ac715 Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Sat, 26 Sep 2026 00:57:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E4=BF=AE=E5=A4=8D=E6=8E=A7?=
 =?UTF-8?q?=E5=88=B6=E5=8F=B0=E5=B8=83=E5=B1=80=E5=8A=A8=E6=80=81=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=AE=8B=E7=95=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/ActionBar.vue |  12 ++++
 web/src/views/ConsoleView.vue    | 106 ++++++++++++++++++++++---------
 2 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/web/src/components/ActionBar.vue b/web/src/components/ActionBar.vue
index 6bcee857..e1429e18 100644
--- a/web/src/components/ActionBar.vue
+++ b/web/src/components/ActionBar.vue
@@ -257,6 +257,18 @@ watch(locale, () => {
 })
 
 watch([() => props.layout, () => props.showComputerUse, floatingCollapsed, minimalDisplayControls], () => {
+  // Layout changes can move this bar while its portal based controls are open.
+  // Close every transient surface first so no old portal remains attached to
+  // the document after the new layout is painted.
+  overflowMenuOpen.value = false
+  pasteOpen.value = false
+  atxOpen.value = false
+  videoPopoverOpen.value = false
+  hidPopoverOpen.value = false
+  audioPopoverOpen.value = false
+  msdDialogOpen.value = false
+  mobileAtxOpen.value = false
+  mobilePasteOpen.value = false
   void observeLayout()
 })
 
diff --git a/web/src/views/ConsoleView.vue b/web/src/views/ConsoleView.vue
index 99afd5b6..953b5fa7 100644
--- a/web/src/views/ConsoleView.vue
+++ b/web/src/views/ConsoleView.vue
@@ -3263,7 +3263,6 @@ onUnmounted(() => {
               />
             </div>
           </div>
-          <div v-if="consoleLayout === 'floating'" id="console-header-toolbar" class="console-header__toolbar" />
           <div class="console-header__account flex shrink-0 items-center gap-1 sm:gap-2">
             <ConsoleHeaderActions
               v-if="consoleLayout === 'floating'"
@@ -3355,36 +3354,39 @@ onUnmounted(() => {
         </div>
       </div>
     </header>
-    <Teleport :key="consoleLayout" defer :to="consoleLayout === 'floating' ? '#console-header-toolbar' : 'body'" :disabled="consoleLayout !== 'floating'">
-    <ActionBar
-      :layout="consoleLayout"
-      :mouse-mode="mouseMode"
-      :video-mode="videoMode"
-      :video-rotation="videoRotation"
-      :ttyd-running="ttydStatus?.running"
-      :show-power="showPower"
-      :atx-enabled="systemStore.atx?.available === true"
-      :show-terminal="showTerminal"
-      :show-computer-use="showComputerUse"
-      :show-paste-text="showPasteText"
-      :show-mic="microphoneTransferEnabled"
-      :scale-mode="videoScaleMode"
-      :source-size-available="sourceSizeAvailable"
-      @toggle-fullscreen="toggleFullscreen"
-      @update:scale-mode="setVideoScaleMode"
-      @toggle-stats="openStatsSheet"
-      @toggle-virtual-keyboard="handleToggleVirtualKeyboard"
-      @toggle-mouse-mode="handleToggleMouseMode"
-      @update:video-mode="handleVideoModeChange"
-      @update:video-rotation="setVideoRotation"
-      @power-short="handlePowerShort"
-      @power-long="handlePowerLong"
-      @reset="handleReset"
-      @wol="handleWol"
-      @open-terminal="openTerminal"
-      @open-computer-use="openComputerUse"
-    />
-    </Teleport>
+    <div
+      class="console-actionbar-host"
+      :class="`console-actionbar-host--${consoleLayout}`"
+    >
+      <ActionBar
+        :layout="consoleLayout"
+        :mouse-mode="mouseMode"
+        :video-mode="videoMode"
+        :video-rotation="videoRotation"
+        :ttyd-running="ttydStatus?.running"
+        :show-power="showPower"
+        :atx-enabled="systemStore.atx?.available === true"
+        :show-terminal="showTerminal"
+        :show-computer-use="showComputerUse"
+        :show-paste-text="showPasteText"
+        :show-mic="microphoneTransferEnabled"
+        :scale-mode="videoScaleMode"
+        :source-size-available="sourceSizeAvailable"
+        @toggle-fullscreen="toggleFullscreen"
+        @update:scale-mode="setVideoScaleMode"
+        @toggle-stats="openStatsSheet"
+        @toggle-virtual-keyboard="handleToggleVirtualKeyboard"
+        @toggle-mouse-mode="handleToggleMouseMode"
+        @update:video-mode="handleVideoModeChange"
+        @update:video-rotation="setVideoRotation"
+        @power-short="handlePowerShort"
+        @power-long="handlePowerLong"
+        @reset="handleReset"
+        @wol="handleWol"
+        @open-terminal="openTerminal"
+        @open-computer-use="openComputerUse"
+      />
+    </div>
     <div
       class="flex-1 overflow-hidden relative transition-[padding] duration-300"
       :class="consoleLayout === 'sidebar' && 'pl-14 sm:pl-16'"
@@ -3704,6 +3706,48 @@ onUnmounted(() => {
 </template>
 
 <style scoped>
+/* Keep the action bar in one DOM location while changing only its placement.
+   Moving a live Teleport target during a layout switch can leave stale portal
+   nodes behind when the target is conditionally rendered. */
+.console-actionbar-host {
+  position: relative;
+  z-index: 40;
+}
+
+.console-actionbar-host--floating {
+  position: absolute;
+  inset: 0 0 auto;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.console-actionbar-host--floating :deep(.console-action-bar) {
+  pointer-events: auto;
+}
+
+.console-actionbar-host--sidebar :deep(.console-action-bar--sidebar) {
+  position: relative;
+  inset: auto;
+  width: 100%;
+  height: 100%;
+}
+
+.console-actionbar-host--sidebar {
+  position: absolute;
+  inset: 3.5rem auto 1.75rem 0;
+  width: 4rem;
+}
+
+@media (max-width: 639px) {
+  .console-actionbar-host--sidebar {
+    inset: 2.5rem auto 1.75rem 0;
+    width: 3.5rem;
+  }
+}
+
 /* Expanded controls may overlap header actions, but stay outside the video stage. */
 .console-header--floating .console-header__row {
   position: relative;