From d480486a650ace02305e45bb12bb0355a47e56be Mon Sep 17 00:00:00 2001
From: hcyang <hqwlkj@outlook.com>
Date: Fri, 15 May 2026 17:10:13 +0800
Subject: [PATCH] =?UTF-8?q?style(DropdownMenu):=20=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E5=86=85=E8=BE=B9=E8=B7=9D=E4=BC=98=E5=8C=96=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为标题和底部帮助文本添加水平内边距
- 为可见条目列表及每个条目增加水平内边距
- 用包含容器包装可见条目，优化布局结构
- 保持原有选中指示和状态指示符渲染逻辑不变
---
 src/ui/DropdownMenu.tsx | 48 ++++++++++++++++++++++-------------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/ui/DropdownMenu.tsx b/src/ui/DropdownMenu.tsx
index 3a963a5..a3083aa 100644
--- a/src/ui/DropdownMenu.tsx
+++ b/src/ui/DropdownMenu.tsx
@@ -123,6 +123,7 @@ const DropdownMenu = React.memo(function DropdownMenu({
           borderRight={false}
           borderTop={false}
           borderLeft={false}
+          paddingX={1}
         >
           <Text color={titleColor} bold>
             {title}
@@ -138,31 +139,33 @@ const DropdownMenu = React.memo(function DropdownMenu({
       ) : null}
 
       {/* Visible items */}
-      {visibleItems.map((item, idx) => {
-        const actualIndex = visibleStart + idx;
-        const isActive = actualIndex === activeIndex;
+      <Box flexDirection="column">
+        {visibleItems.map((item, idx) => {
+          const actualIndex = visibleStart + idx;
+          const isActive = actualIndex === activeIndex;
 
-        // Use custom renderer if provided
-        if (renderItem) {
-          return <React.Fragment key={item.key}>{renderItem(item, isActive)}</React.Fragment>;
-        }
+          // Use custom renderer if provided
+          if (renderItem) {
+            return <React.Fragment key={item.key}>{renderItem(item, isActive)}</React.Fragment>;
+          }
 
-        // Default rendering with selection indicator and optional features
-        return (
-          <Box key={item.key} flexGrow={1} flexDirection="row" gap={2}>
-            <Box width={labelColumnWidth} flexShrink={0}>
-              <Text color={isActive ? activeColor : undefined} wrap="truncate-end">
-                {isActive ? "› " : "  "}
-                {item.selected !== undefined ? (item.selected ? "●" : "○") : null} <Text bold>{item.label}</Text>
-                {item.statusIndicator ? (
-                  <Text color={item.statusIndicator.color}> {item.statusIndicator.symbol}</Text>
-                ) : null}
-              </Text>
+          // Default rendering with selection indicator and optional features
+          return (
+            <Box key={item.key} flexGrow={1} flexDirection="row" gap={2} paddingX={1}>
+              <Box width={labelColumnWidth} flexShrink={0}>
+                <Text color={isActive ? activeColor : undefined} wrap="truncate-end">
+                  {isActive ? "› " : "  "}
+                  {item.selected !== undefined ? (item.selected ? "●" : "○") : null} <Text bold>{item.label}</Text>
+                  {item.statusIndicator ? (
+                    <Text color={item.statusIndicator.color}> {item.statusIndicator.symbol}</Text>
+                  ) : null}
+                </Text>
+              </Box>
+              <Box flexGrow={1}>{item.description ? <Text dimColor>{`${item.description}`}</Text> : null}</Box>
             </Box>
-            <Box flexGrow={1}>{item.description ? <Text dimColor>{`${item.description}`}</Text> : null}</Box>
-          </Box>
-        );
-      })}
+          );
+        })}
+      </Box>
 
       {/* Scroll indicator - bottom */}
       {visibleStart + visibleItems.length < items.length ? (
@@ -180,6 +183,7 @@ const DropdownMenu = React.memo(function DropdownMenu({
           borderRight={false}
           borderTop={true}
           borderLeft={false}
+          paddingX={1}
         >
           <Text dimColor>{helpText}</Text>
         </Box>