feat(proxies): add multi-column render back

src/components/Collapse.tsx

@@ -41,7 +41,7 @@ export const Collapse: ParentComponent<Props> = (props) => {
       <div
         class={twMerge(
           getCollapseContentClassName(),
-          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5',
+          'collapse-content grid grid-cols-1 gap-2 transition-opacity duration-1000 xl:grid-cols-3 2xl:grid-cols-4',
         )}
       >
         <Show when={props.isOpen}>{children(() => props.children)()}</Show>

src/components/ProxyNodeCard.tsx

@@ -43,16 +43,15 @@ export const ProxyNodeCard = (props: {
       onClick={onClick}
     >
       <div class="card-body">
-        <span class="card-title line-clamp-1 text-start text-sm">
-          {proxyName}
-        </span>
+        <div class="card-title flex items-center justify-between gap-2">
+          <span class="line-clamp-1 text-start text-sm">{proxyName}</span>
 
-        <div class="flex items-center justify-between gap-2">
-          <div class="flex items-center gap-2">
           <div class="badge badge-primary badge-sm font-bold uppercase">
             {formatProxyType(proxyNode()?.type)}
           </div>
+        </div>
 
+        <div class="flex flex-wrap items-center gap-2">
           <Show when={specialType()}>
             <div class="badge badge-secondary badge-sm">{specialType()}</div>
           </Show>
@@ -62,7 +61,7 @@ export const ProxyNodeCard = (props: {
           </Show>
         </div>
 
-          <div class="flex items-center gap-2">
+        <div class="card-actions items-center justify-end">
           <Latency
             name={props.proxyName}
             class={twMerge(isSelected && 'badge')}
@@ -88,6 +87,5 @@ export const ProxyNodeCard = (props: {
         </div>
       </div>
     </div>
-    </div>
   )
 }

src/pages/Proxies.tsx

@@ -173,7 +173,7 @@ export default () => {
 
         <div class="flex-1 overflow-y-auto">
           <Show when={activeTab() === ActiveTab.proxies}>
-            <div class="flex flex-col gap-2">
+            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
               <For each={renderProxies()}>
                 {(proxyGroup) => {
                   const sortedProxyNames = createMemo(() =>
@@ -278,7 +278,7 @@ export default () => {
           </Show>
 
           <Show when={activeTab() === ActiveTab.proxyProviders}>
-            <div class="flex flex-col gap-2">
+            <div class="grid grid-cols-1 place-items-start gap-2 sm:grid-cols-2">
               <For each={proxyProviders()}>
                 {(proxyProvider) => {
                   const sortedProxyNames = createMemo(() =>

tailwind.config.ts

@@ -6,9 +6,11 @@ export default {
   plugins: [daisyui],
   daisyui: { themes: true },
   theme: {
+    extend: {
       fontFamily: {
         twemoji: ['system-ui', 'Twemoji Mozilla', 'Fira Sans', 'monospace'],
         'no-twemoji': ['system-ui', 'Fira Sans', 'monospace'],
       },
     },
+  },
 } as Config