feat: truncate proxy node name

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "ngClass",
+    ".*ClassName*"
+  ]
+}

src/components/Collpase.tsx

@@ -12,17 +12,22 @@ const Collapse: ParentComponent<Props> = (props) => {
   const { title, content, onCollapse } = props
 
   const getCollapseClassName = () => {
-    return props.isOpen ? 'collapse-open' : 'collapse-close'
+    const openedClassName = 'collapse-open'
+    const closedClassName = 'collapse-close'
+    return props.isOpen ? openedClassName : closedClassName
   }
+
   const getCollapseContentClassName = () => {
-    return props.isOpen ? 'opacity-100' : 'opacity-0 scale-y-0'
+    const openedClassName = 'opacity-100'
+    const closedClassName = 'opacity-0 scale-y-0'
+    return props.isOpen ? openedClassName : closedClassName
   }
 
   return (
     <div
       class={twMerge(
         getCollapseClassName(),
-        'collapse collapse-arrow border-secondary bg-base-200 p-1',
+        'collapse collapse-arrow overflow-visible border-secondary bg-base-200 p-1',
       )}
     >
       <div
@@ -34,7 +39,7 @@ const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 overflow-hidden transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
+          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-3 lg:grid-cols-5',
         )}
       >
         {content}

src/components/ProxyNodeCard.tsx

@@ -17,6 +17,7 @@ export default (props: {
 
     return <span>{delay}ms</span>
   }
+  console.log(proxyName)
 
   return (
     <div
@@ -24,12 +25,13 @@ export default (props: {
         isSelected
           ? 'border-primary bg-success-content text-success'
           : 'border-secondary',
-        onClick ? 'cursor-pointer' : '',
+        onClick && 'cursor-pointer',
-        'card card-bordered card-compact m-1 flex-row justify-between border-secondary p-4',
+        'card card-bordered tooltip tooltip-bottom card-compact flex flex-row justify-between gap-2 p-4',
       )}
       onClick={() => onClick?.()}
+      data-tip={proxyName}
     >
-      <span class="mr-2 overflow-hidden whitespace-nowrap">{proxyName}</span>
+      <span class="truncate">{proxyName}</span>
       <span>{Delay(proxyName)}</span>
     </div>
   )

src/pages/Proxies.tsx

@@ -41,8 +41,9 @@ export default () => {
             {(proxy) => {
               const title = (
                 <>
-                  <div class="flex items-center">
+                  <div class="flex items-center gap-2">
-                    <span class="mr-3">{proxy.name}</span>
+                    <span>{proxy.name}</span>
+
                     <IconBrandSpeedtest
                       class="cursor-pointer"
                       onClick={(e) => onSpeedTestClick(e, proxy.name)}