From 520c33557eb37fcdc8ea89f3aeb5740e2deb0c7a Mon Sep 17 00:00:00 2001
From: Tunglies <tunglies.work@outlook.com>
Date: Sun, 2 Mar 2025 05:36:18 +0800
Subject: [PATCH] refactor: improve proxy group UI and spacing (#2835)

- Increased spacing in proxy-groups.tsx by adjusting the right position
  of the alphabet selector to provide better visual separation
- Enhanced spacing in proxy-render.tsx with larger margins and padding
  - Increased group item margins from 8px to 10px with 16px horizontal spacing
  - Expanded border radius from 8px to 10px for smoother appearance
  - Improved ProxyHead component spacing with pl: 3, pr: 3.5
  - Enhanced grid spacing in proxy collection items from 1 to 1.5
  - Adjusted padding for better visual hierarchy

These changes create a more polished, spacious layout with improved
readability and touch targets.
---
 src/components/proxy/proxy-groups.tsx |  9 +++++++--
 src/components/proxy/proxy-render.tsx | 14 +++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/components/proxy/proxy-groups.tsx b/src/components/proxy/proxy-groups.tsx
index adec9da7..b0f78bbd 100644
--- a/src/components/proxy/proxy-groups.tsx
+++ b/src/components/proxy/proxy-groups.tsx
@@ -508,8 +508,13 @@ export const ProxyGroups = (props: Props) => {
         )}
       />
       <ScrollTopButton show={showScrollTop} onClick={scrollToTop} />
-
-      <AlphabetSelector ref={alphabetSelectorRef} style={{ maxHeight }}>
+      <AlphabetSelector
+        ref={alphabetSelectorRef}
+        style={{
+          maxHeight,
+          right: 10,
+        }}
+      >
         <div className="scroll-container">
           <div ref={letterContainerRef} className="letter-container">
             {groupFirstLetters.map((name) => (
diff --git a/src/components/proxy/proxy-render.tsx b/src/components/proxy/proxy-render.tsx
index 7a18b01d..57190129 100644
--- a/src/components/proxy/proxy-render.tsx
+++ b/src/components/proxy/proxy-render.tsx
@@ -66,8 +66,8 @@ export const ProxyRender = (props: RenderProps) => {
         style={{
           background: itembackgroundcolor,
           height: "100%",
-          margin: "8px 8px",
-          borderRadius: "8px",
+          margin: "10px 16px",
+          borderRadius: "10px",
         }}
         onClick={() => onHeadState(group.name, { open: !headState?.open })}
       >
@@ -131,7 +131,7 @@ export const ProxyRender = (props: RenderProps) => {
   if (type === 1) {
     return (
       <ProxyHead
-        sx={{ pl: 2, pr: 3, mt: indent ? 1 : 0.5, mb: 1 }}
+        sx={{ pl: 3, pr: 3.5, mt: indent ? 1 : 0.5, mb: 1 }}
         url={group.testUrl}
         groupName={group.name}
         headState={headState!}
@@ -191,10 +191,10 @@ export const ProxyRender = (props: RenderProps) => {
         sx={{
           height: 56,
           display: "grid",
-          gap: 1,
-          pl: 2,
-          pr: 2,
-          pb: 1,
+          gap: 1.5,
+          pl: 3,
+          pr: 3.5,
+          pb: 1.25,
           gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
         }}
       >