From 6a5ea5a8c1b5121ba364a1326627ac60a623c88a Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:00:39 +0900
Subject: [PATCH 1/2] ui(popup): adjust spacing

---
 src/pages/components/ScriptMenuList/index.tsx |  1 +
 src/pages/components/layout/PopupLayout.tsx   |  1 +
 src/pages/components/layout/popup.css         | 65 +++++++++++++++++++
 src/pages/popup/App.tsx                       |  4 +-
 4 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/components/layout/popup.css

diff --git a/src/pages/components/ScriptMenuList/index.tsx b/src/pages/components/ScriptMenuList/index.tsx
index 27448deb7..96ff474b7 100644
--- a/src/pages/components/ScriptMenuList/index.tsx
+++ b/src/pages/components/ScriptMenuList/index.tsx
@@ -210,6 +210,7 @@ const ListMenuItem = React.memo(
 
     return (
       <Collapse
+        className={"popup-list-item"}
         activeKey={isActive ? item.uuid : undefined}
         onChange={(_, keys) => {
           setIsActive(keys.includes(item.uuid));
diff --git a/src/pages/components/layout/PopupLayout.tsx b/src/pages/components/layout/PopupLayout.tsx
index cb7e1c35e..4baac7446 100644
--- a/src/pages/components/layout/PopupLayout.tsx
+++ b/src/pages/components/layout/PopupLayout.tsx
@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 import "./index.css";
+import "./popup.css";
 import { ConfigProvider } from "@arco-design/web-react";
 import { arcoLocale } from "@App/locales/arco";
 import i18n from "@App/locales/locales";
diff --git a/src/pages/components/layout/popup.css b/src/pages/components/layout/popup.css
new file mode 100644
index 000000000..20a0d96ac
--- /dev/null
+++ b/src/pages/components/layout/popup.css
@@ -0,0 +1,65 @@
+.popup-div .arco-collapse-item-header {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    line-height: 125%;
+}
+
+.popup-list-item .arco-collapse-item-header{
+    padding: 4px 12px;
+    line-height: initial;
+}
+
+.popup-list-item .arco-avatar-image {
+    width: 16px;
+    height: 16px;
+}
+
+.popup-list-item .arco-avatar-square {
+    display: inline-flex !important;
+    flex-direction: column !important;
+    align-items: center;
+    place-content: center;
+    place-items: center;
+    place-self: center;
+    margin-right: 4px !important;
+}
+
+.popup-list-item .arco-space-item {
+    display: inline-flex !important;
+}
+
+.popup-list-item .arco-space-item > span {
+    display: inline-flex !important;
+}
+
+
+.popup-list-item .arco-collapse-item-active .arco-collapse-item-header-title {
+    font-weight: unset !important;
+}
+
+.popup-list-item .arco-collapse-item-content-box * {
+    line-height: initial;
+}
+
+.popup-list-item .arco-collapse-item-content-box .arco-btn-size-default {
+    height: 24px;
+    padding: 0 6px;
+    font-size: 12px;
+}
+
+.popup-list-item .arco-switch-small {
+    min-width: 28px;
+    height: 14px;
+    line-height: 14px;
+}
+
+.popup-list-item .arco-switch-small .arco-switch-dot {
+    border-radius: 6px;
+    width: 10px;
+    height: 10px;
+    left: 2px;
+}
+
+.popup-list-item .arco-switch-small.arco-switch-checked .arco-switch-dot {
+    left: calc(100% - 12px);
+}
diff --git a/src/pages/popup/App.tsx b/src/pages/popup/App.tsx
index 33ffde740..02d009322 100644
--- a/src/pages/popup/App.tsx
+++ b/src/pages/popup/App.tsx
@@ -401,6 +401,7 @@ function App() {
     <>
       <PopupWarnings isBlacklist={isBlacklist} />
       <Card
+        className={"popup-div"}
         size="small"
         title={
           <div className="tw-flex tw-justify-between">
@@ -496,6 +497,7 @@ function App() {
           }
         />
         <Collapse
+          className={"popup-body"}
           bordered={false}
           activeKey={collapseActiveKey}
           onChange={(_, keys) => {
@@ -535,7 +537,7 @@ function App() {
             />
           </CollapseItem>
         </Collapse>
-        <div className="tw-flex tw-flex-row arco-card-header !tw-h-6">
+        <div className="popup-footer tw-flex tw-flex-row arco-card-header !tw-h-6">
           {versionCompare(ExtVersion, checkUpdate.version) === VersionCompare.LESS ? (
             <Tooltip content={`${t("popup.new_version_available")} (v${checkUpdate.version})`}>
               <span

From 9d28663a6bda65f798b56124f9979f364d8b1f70 Mon Sep 17 00:00:00 2001
From: cyfung1031 <44498510+cyfung1031@users.noreply.github.com>
Date: Thu, 11 Jun 2026 15:11:07 +0900
Subject: [PATCH 2/2] Update popup.css

---
 src/pages/components/layout/popup.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/components/layout/popup.css b/src/pages/components/layout/popup.css
index 20a0d96ac..69d9b82ec 100644
--- a/src/pages/components/layout/popup.css
+++ b/src/pages/components/layout/popup.css
@@ -14,6 +14,10 @@
     height: 16px;
 }
 
+.popup-list-item .arco-space-item:last-child {
+    margin-right: 16px;
+}
+
 .popup-list-item .arco-avatar-square {
     display: inline-flex !important;
     flex-direction: column !important;
@@ -28,10 +32,6 @@
     display: inline-flex !important;
 }
 
-.popup-list-item .arco-space-item > span {
-    display: inline-flex !important;
-}
-
 
 .popup-list-item .arco-collapse-item-active .arco-collapse-item-header-title {
     font-weight: unset !important;