From 6d954a598675e240b3abaa67b90ad92172b5eefc Mon Sep 17 00:00:00 2001
From: pompurin404 <pompurin404@mihomo.party>
Date: Fri, 9 Aug 2024 09:59:13 +0800
Subject: [PATCH] fix styles

---
 .../src/components/rules/rule-item.tsx        |  8 +++----
 src/renderer/src/pages/proxies.tsx            | 23 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/renderer/src/components/rules/rule-item.tsx b/src/renderer/src/components/rules/rule-item.tsx
index b09eff8..e399104 100644
--- a/src/renderer/src/components/rules/rule-item.tsx
+++ b/src/renderer/src/components/rules/rule-item.tsx
@@ -5,11 +5,11 @@ const RuleItem: React.FC<IMihomoRulesDetail> = (props) => {
   const { type, payload, proxy } = props
   return (
     <Card className="mb-2 mx-2">
-      <CardBody className="flex justify-between">
-        <div className="flex justify-between">
+      <CardBody className="w-full">
+        <div className="select-none text-ellipsis whitespace-nowrap overflow-hidden">{payload}</div>
+        <div className="flex justify-start text-default-500">
           <div className="select-none">{type}</div>
-          <div className="select-none">{payload}</div>
-          <div className="select-none">{proxy}</div>
+          <div className="select-none ml-2">{proxy}</div>
         </div>
       </CardBody>
     </Card>
diff --git a/src/renderer/src/pages/proxies.tsx b/src/renderer/src/pages/proxies.tsx
index 93b71fb..aff5814 100644
--- a/src/renderer/src/pages/proxies.tsx
+++ b/src/renderer/src/pages/proxies.tsx
@@ -160,17 +160,20 @@ const Proxies: React.FC = () => {
                           src={groups[index].icon}
                         />
                       ) : null}
-                      <div className="flag-emoji h-[32px] select-none text-md leading-[32px]">
-                        {groups[index].name}
+                      <div className="text-ellipsis overflow-hidden whitespace-nowrap">
+                        <div className="inline flag-emoji h-[32px] select-none text-md leading-[32px]">
+                          {groups[index].name}
+                        </div>
+
                         {proxyDisplayMode === 'full' && (
-                          <>
-                            <div className="inline ml-2 text-sm text-default-500">
-                              {groups[index].type}
-                            </div>
-                            <div className="flag-emoji inline ml-2 text-sm text-default-500">
-                              {groups[index].now}
-                            </div>
-                          </>
+                          <div className="inline ml-2 text-sm text-default-500">
+                            {groups[index].type}
+                          </div>
+                        )}
+                        {proxyDisplayMode === 'full' && (
+                          <div className="inline flag-emoji ml-2 text-sm text-default-500">
+                            {groups[index].now}
+                          </div>
                         )}
                       </div>
                     </div>