From e3ca9273061c81cedf5b230cd765bc98f23f35b6 Mon Sep 17 00:00:00 2001
From: Jason Young <44939412+farion1231@users.noreply.github.com>
Date: Fri, 22 Aug 2025 22:46:33 +0800
Subject: [PATCH] fix(renderer): prevent overlays from entering titlebar drag
 region via no-drag; fixes #9123 (#9154)

* fix(renderer): prevent overlays from entering titlebar drag region via no-drag and platform safe gap; cap modal body height; fixes #9123

* fix: modal close button intercepted by drag region in small window mode

- Set modal content as no-drag to ensure button clickability
- Use z-index layering for titlebar drag region management
- Remove redundant platform detection and CSS variables

* refine: only disable drag on modal close button instead of entire modal content

This allows users to still drag the window by clicking on modal header or other areas,
improving UX in small window scenarios while still protecting the close button interaction.
---
 src/renderer/src/assets/styles/ant.scss       | 23 +++++++++++++++++++
 .../src/components/Tab/TabContainer.tsx       | 14 +++++++----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/renderer/src/assets/styles/ant.scss b/src/renderer/src/assets/styles/ant.scss
index 227f2d84fa..ad6d1e0eaf 100644
--- a/src/renderer/src/assets/styles/ant.scss
+++ b/src/renderer/src/assets/styles/ant.scss
@@ -1,5 +1,26 @@
 @use './container.scss';
 
+/* Modal 关闭按钮不应该可拖拽，以确保点击正常 */
+.ant-modal-close {
+  -webkit-app-region: no-drag;
+}
+
+/* 普通 Drawer 内容不应该可拖拽 */
+.ant-drawer-content {
+  -webkit-app-region: no-drag;
+}
+
+/* minapp-drawer 有自己的拖拽规则 */
+
+/* 下拉菜单和弹出框内容不应该可拖拽 */
+.ant-dropdown,
+.ant-dropdown-menu,
+.ant-popover-content,
+.ant-tooltip-content,
+.ant-popconfirm {
+  -webkit-app-region: no-drag;
+}
+
 #inputbar {
   resize: none;
 }
@@ -66,6 +87,7 @@
 }
 
 .ant-drawer-header {
+  /* 普通 drawer header 不应该可拖拽，除非被 minapp-drawer 覆盖 */
   -webkit-app-region: no-drag;
 }
 
@@ -148,6 +170,7 @@
       border-radius: 10px;
     }
     .ant-modal-body {
+      /* 保持 body 在视口内，使用标准的最大高度 */
       max-height: 80vh;
       overflow-y: auto;
       padding: 0 16px 0 16px;
diff --git a/src/renderer/src/components/Tab/TabContainer.tsx b/src/renderer/src/components/Tab/TabContainer.tsx
index 4fdeff7e72..e3fd8291d3 100644
--- a/src/renderer/src/components/Tab/TabContainer.tsx
+++ b/src/renderer/src/components/Tab/TabContainer.tsx
@@ -206,8 +206,16 @@ const TabsBar = styled.div<{ $isFullscreen: boolean }>`
   gap: 5px;
   padding-left: ${({ $isFullscreen }) => (!$isFullscreen && isMac ? '75px' : '15px')};
   padding-right: ${({ $isFullscreen }) => ($isFullscreen ? '12px' : isWin ? '140px' : isLinux ? '120px' : '12px')};
-  -webkit-app-region: drag;
   height: var(--navbar-height);
+  position: relative;
+  -webkit-app-region: drag;
+  
+  /* 确保交互元素在拖拽区域之上 */
+  > * {
+    position: relative;
+    z-index: 1;
+    -webkit-app-region: no-drag;
+  }
 `
 
 const Tab = styled.div<{ active?: boolean }>`
@@ -220,7 +228,6 @@ const Tab = styled.div<{ active?: boolean }>`
   border-radius: var(--list-item-border-radius);
   cursor: pointer;
   user-select: none;
-  -webkit-app-region: none;
   height: 30px;
   min-width: 90px;
   transition: background 0.2s;
@@ -273,7 +280,6 @@ const AddTabButton = styled.div`
   height: 30px;
   cursor: pointer;
   color: var(--color-text-2);
-  -webkit-app-region: none;
   border-radius: var(--list-item-border-radius);
   &.active {
     background: var(--color-list-item);
@@ -298,7 +304,6 @@ const ThemeButton = styled.div`
   height: 30px;
   cursor: pointer;
   color: var(--color-text);
-  -webkit-app-region: none;
 
   &:hover {
     background: var(--color-list-item);
@@ -314,7 +319,6 @@ const SettingsButton = styled.div<{ $active: boolean }>`
   height: 30px;
   cursor: pointer;
   color: var(--color-text);
-  -webkit-app-region: none;
   border-radius: 8px;
   background: ${(props) => (props.$active ? 'var(--color-list-item)' : 'transparent')};
   &:hover {