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

@@ -508,8 +508,13 @@ export const ProxyGroups = (props: Props) => {
         )}
       />
       <ScrollTopButton show={showScrollTop} onClick={scrollToTop} />
-
+      <AlphabetSelector
-      <AlphabetSelector ref={alphabetSelectorRef} style={{ maxHeight }}>
+        ref={alphabetSelectorRef}
+        style={{
+          maxHeight,
+          right: 10,
+        }}
+      >
         <div className="scroll-container">
           <div ref={letterContainerRef} className="letter-container">
             {groupFirstLetters.map((name) => (

src/components/proxy/proxy-render.tsx

@@ -66,8 +66,8 @@ export const ProxyRender = (props: RenderProps) => {
         style={{
           background: itembackgroundcolor,
           height: "100%",
-          margin: "8px 8px",
+          margin: "10px 16px",
-          borderRadius: "8px",
+          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,
+          gap: 1.5,
-          pl: 2,
+          pl: 3,
-          pr: 2,
+          pr: 3.5,
-          pb: 1,
+          pb: 1.25,
           gridTemplateColumns: `repeat(${item.col! || 2}, 1fr)`,
         }}
       >