corrected layout for better visibility

src/components/proxy/proxy-item-mini.tsx

@@ -66,9 +66,8 @@ export const ProxyItemMini = (props: Props) => {
       data-selected={selected}
       onClick={handleItemClick}
       title={`${proxy.name}\n${proxy.now ?? ""}`}
-      className="group relative flex h-16 cursor-pointer items-center justify-between rounded-lg border border-transparent bg-card p-3 transition-all duration-200 data-[selected=true]:border-primary data-[selected=true]:bg-accent"
+      className="group relative flex h-16 cursor-pointer items-center justify-between rounded-lg border bg-card p-3 shadow-sm transition-colors duration-200 hover:bg-accent data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
     >
-      {/* --- КОНЕЦ ИЗМЕНЕНИЙ --- */}
       <div className="flex-1 min-w-0">
         <p className="truncate text-sm font-medium">{proxy.name}</p>
 

src/components/proxy/proxy-item.tsx

@@ -79,7 +79,7 @@ export const ProxyItem = (props: Props) => {
     <div
       data-selected={selected}
       onClick={handleItemClick}
-      className="group mx-2 mb-2 flex cursor-pointer items-center rounded-lg border border-transparent bg-card p-2 pr-3 transition-all duration-200 data-[selected=true]:border-primary data-[selected=true]:bg-accent"
+      className="group mx-2 mb-1 flex cursor-pointer items-center rounded-lg border bg-card p-3 transition-all duration-200 hover:shadow-md data-[selected=true]:ring-2 data-[selected=true]:ring-primary"
     >
       {/* Левая часть с названием и тегами */}
       <div className="flex-1 min-w-0">

src/components/proxy/proxy-render.tsx

@@ -45,7 +45,7 @@ export const ProxyRender = (props: RenderProps) => {
   if (type === 0) {
     return (
       <div
-        className="flex items-center mx-2 my-1 p-3 rounded-lg bg-card hover:bg-accent cursor-pointer transition-colors"
+        className="flex items-center mx-2 my-1 p-3 rounded-lg bg-card hover:bg-accent cursor-pointer transition-colors border shadow-sm"
         onClick={() => onHeadState(group.name, { open: !headState?.open })}
       >
         {/* Логика иконок групп (сохранена) */}

src/pages/proxies.tsx

@@ -1,5 +1,3 @@
-// ProxyPage.tsx
-
 import useSWR from "swr";
 import { useEffect } from "react";
 import { useLockFn } from "ahooks";
@@ -62,9 +60,7 @@ const ProxyPage = () => {
   ];
 
   return (
-    // Используем наш знакомый паттерн для создания макета с прокручиваемым контентом
     <div className="h-full flex flex-col">
-      {/* Шапка страницы */}
       <div className="p-4 pb-2 flex justify-between items-center">
         <h2 className="text-2xl font-semibold tracking-tight">
           {t("Proxies")}
@@ -107,8 +103,7 @@ const ProxyPage = () => {
         </div>
       </div>
 
-      {/* Основной контент, который будет скроллиться */}
-      <div className="flex-1 overflow-y-auto min-h-0">
+      <div className="flex-1 overflow-y-auto min-h-0 p-4">
         <ProxyGroups mode={curMode!} />
       </div>
     </div>