From 9189c688004b192c20d09a60dcd08ab647366d32 Mon Sep 17 00:00:00 2001
From: Sagit <sagitchu@gmail.com>
Date: Thu, 19 Feb 2026 09:17:04 +0000
Subject: [PATCH 1/3] fix(frontend): normalize card spacing and multiselect
 overflow

---
 vite-frontend/src/pages/forward.tsx               | 8 ++++----
 vite-frontend/src/pages/group.tsx                 | 4 ++--
 vite-frontend/src/pages/limit.tsx                 | 4 ++--
 vite-frontend/src/pages/node.tsx                  | 2 +-
 vite-frontend/src/pages/panel-sharing.tsx         | 8 ++++----
 vite-frontend/src/pages/tunnel.tsx                | 4 ++--
 vite-frontend/src/pages/user.tsx                  | 4 ++--
 vite-frontend/src/shadcn-bridge/heroui/select.tsx | 6 +++---
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 3c8f70d..5a0a9e3 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -1262,7 +1262,7 @@ export default function ForwardPage() {
         key={forward.id}
         className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
       >
-        <CardHeader className="pb-2">
+        <CardHeader className="pb-2 md:pb-2">
           <div className="flex justify-between items-start w-full">
             {selectMode && (
               <Checkbox
@@ -1319,7 +1319,7 @@ export default function ForwardPage() {
           </div>
         </CardHeader>
 
-        <CardBody className="pt-0 pb-3">
+        <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
           <div className="space-y-2">
             {/* 地址信息 */}
             <div className="space-y-1">
@@ -1667,7 +1667,7 @@ export default function ForwardPage() {
                 key={userGroup.userId || "unknown"}
                 className="shadow-sm border border-divider w-full overflow-hidden"
               >
-                <CardHeader className="pb-3">
+                <CardHeader className="pb-3 md:pb-3">
                   <div className="flex items-center justify-between w-full min-w-0">
                     <div className="flex items-center gap-3 min-w-0 flex-1">
                       <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0">
@@ -1709,7 +1709,7 @@ export default function ForwardPage() {
                   </div>
                 </CardHeader>
 
-                <CardBody className="pt-0">
+                <CardBody className="pt-0 md:pt-0">
                   <Accordion className="px-0" variant="splitted">
                     {userGroup.tunnelGroups.map((tunnelGroup) => (
                       <AccordionItem
diff --git a/vite-frontend/src/pages/group.tsx b/vite-frontend/src/pages/group.tsx
index c79cbcf..d7b153f 100644
--- a/vite-frontend/src/pages/group.tsx
+++ b/vite-frontend/src/pages/group.tsx
@@ -779,7 +779,7 @@ export default function GroupPage() {
             >
               {(item) => <SelectItem key={item.id}>{item.name}</SelectItem>}
             </Select>
-            <p className="text-xs text-default-500">
+            <p className="text-xs text-default-500 break-all whitespace-normal">
               当前已选：
               {Array.from(selectedTunnelKeys)
                 .map((id) => tunnelNameMap.get(Number(id)) || id)
@@ -824,7 +824,7 @@ export default function GroupPage() {
             >
               {(item) => <SelectItem key={item.id}>{item.user}</SelectItem>}
             </Select>
-            <p className="text-xs text-default-500">
+            <p className="text-xs text-default-500 break-all whitespace-normal">
               当前已选：
               {Array.from(selectedUserKeys)
                 .map((id) => userNameMap.get(Number(id)) || id)
diff --git a/vite-frontend/src/pages/limit.tsx b/vite-frontend/src/pages/limit.tsx
index 09b4fda..3d260ec 100644
--- a/vite-frontend/src/pages/limit.tsx
+++ b/vite-frontend/src/pages/limit.tsx
@@ -237,7 +237,7 @@ export default function LimitPage() {
               key={rule.id}
               className="shadow-sm border border-gray-200 dark:border-gray-700"
             >
-              <CardHeader className="pb-3">
+              <CardHeader className="pb-3 md:pb-3">
                 <div className="flex justify-between items-start w-full">
                   <div>
                     <h3 className="font-semibold text-foreground">
@@ -253,7 +253,7 @@ export default function LimitPage() {
                   </Chip>
                 </div>
               </CardHeader>
-              <CardBody className="pt-0">
+              <CardBody className="pt-0 md:pt-0">
                 <div className="space-y-3">
                   <div className="flex justify-between items-center">
                     <span className="text-small text-default-600">
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 788aba2..6922162 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -1155,7 +1155,7 @@ export default function NodePage() {
                               <span className="text-default-600 flex-shrink-0">
                                 IP
                               </span>
-                              <div className="text-right text-xs min-w-0 flex-1 ml-2">
+                              <div className="text-right text-xs min-w-0 flex-1 ml-2 min-h-[2.125rem]">
                                 {node.serverIpV4?.trim() ||
                                 node.serverIpV6?.trim() ? (
                                   <div className="space-y-0.5">
diff --git a/vite-frontend/src/pages/panel-sharing.tsx b/vite-frontend/src/pages/panel-sharing.tsx
index 7361157..3216087 100644
--- a/vite-frontend/src/pages/panel-sharing.tsx
+++ b/vite-frontend/src/pages/panel-sharing.tsx
@@ -420,7 +420,7 @@ export default function PanelSharingPage() {
                       key={share.id}
                       className="border border-divider shadow-sm"
                     >
-                      <CardHeader className="flex justify-between">
+                      <CardHeader className="flex justify-between pb-2 md:pb-2">
                         <h3 className="font-bold">{share.name}</h3>
                         <div className="flex gap-2">
                           <Button
@@ -447,7 +447,7 @@ export default function PanelSharingPage() {
                           </Button>
                         </div>
                       </CardHeader>
-                      <CardBody className="text-sm space-y-2">
+                      <CardBody className="text-sm space-y-2 pt-0 md:pt-0">
                         <p>
                           端口范围: {share.portRangeStart} -{" "}
                           {share.portRangeEnd}
@@ -535,13 +535,13 @@ export default function PanelSharingPage() {
                       key={node.nodeId}
                       className="border border-divider shadow-sm"
                     >
-                      <CardHeader className="flex justify-between">
+                      <CardHeader className="flex justify-between pb-2 md:pb-2">
                         <h3 className="font-bold">{node.nodeName}</h3>
                         <span className="text-xs text-default-500">
                           绑定 {node.activeBindingNum || 0}
                         </span>
                       </CardHeader>
-                      <CardBody className="text-sm space-y-2">
+                      <CardBody className="text-sm space-y-2 pt-0 md:pt-0">
                         {node.syncError && (
                           <div className="px-2 py-1.5 rounded-md bg-warning-50 dark:bg-warning-100/10 text-warning-700 dark:text-warning-400 text-xs">
                             {node.syncError === "provider_share_deleted"
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index ef27274..347fdd3 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -742,7 +742,7 @@ export default function TunnelPage() {
                         key={tunnel.id}
                         className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
                       >
-                        <CardHeader className="pb-2">
+                        <CardHeader className="pb-2 md:pb-2">
                           <div className="flex justify-between items-start w-full">
                             {selectMode && (
                               <Checkbox
@@ -784,7 +784,7 @@ export default function TunnelPage() {
                           </div>
                         </CardHeader>
 
-                        <CardBody className="pt-0 pb-3">
+                        <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
                           <div className="space-y-3">
                             {/* 拓扑结构 */}
                             <div className="pt-2 border-t border-divider">
diff --git a/vite-frontend/src/pages/user.tsx b/vite-frontend/src/pages/user.tsx
index e1296fb..b4e9841 100644
--- a/vite-frontend/src/pages/user.tsx
+++ b/vite-frontend/src/pages/user.tsx
@@ -690,7 +690,7 @@ export default function UserPage() {
                 key={user.id}
                 className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
               >
-                <CardHeader className="pb-2">
+                <CardHeader className="pb-2 md:pb-2">
                   <div className="flex justify-between items-start w-full">
                     <div className="flex-1 min-w-0">
                       <h3 className="font-semibold text-foreground truncate text-sm">
@@ -713,7 +713,7 @@ export default function UserPage() {
                   </div>
                 </CardHeader>
 
-                <CardBody className="pt-0 pb-3">
+                <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
                   <div className="space-y-2">
                     {/* 流量信息 */}
                     <div className="space-y-1.5">
diff --git a/vite-frontend/src/shadcn-bridge/heroui/select.tsx b/vite-frontend/src/shadcn-bridge/heroui/select.tsx
index 56a7aad..80144fc 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/select.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/select.tsx
@@ -240,7 +240,7 @@ export function Select<T>({
       {selectionMode === "multiple" ? (
         <div
           className={cn(
-            "w-full rounded-md border border-input bg-background shadow-sm",
+            "w-full overflow-hidden rounded-md border border-input bg-background shadow-sm",
             isDisabled ? "cursor-not-allowed opacity-60" : "",
             className,
           )}
@@ -250,7 +250,7 @@ export function Select<T>({
             aria-controls={`${generatedId}-listbox`}
             aria-expanded={isExpanded}
             className={cn(
-              "flex w-full items-center gap-2 px-3 py-2 text-left",
+              "flex w-full min-w-0 items-center gap-2 overflow-hidden px-3 py-2 text-left",
               classNames?.trigger,
             )}
             disabled={isDisabled}
@@ -259,7 +259,7 @@ export function Select<T>({
           >
             <span
               className={cn(
-                "block flex-1 truncate",
+                "block min-w-0 flex-1 truncate",
                 textSizeClass(size),
                 selectedArray.length > 0 ? "text-foreground" : "text-default-500",
               )}

From d1460ab9c721a8d88e98293b7b0e039db17e8ab0 Mon Sep 17 00:00:00 2001
From: Sagit <sagitchu@gmail.com>
Date: Thu, 19 Feb 2026 09:52:14 +0000
Subject: [PATCH 2/3] fix(frontend): tighten remaining card header spacing

---
 vite-frontend/src/pages/forward.tsx | 2 +-
 vite-frontend/src/pages/limit.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 5a0a9e3..3dfbf81 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -1667,7 +1667,7 @@ export default function ForwardPage() {
                 key={userGroup.userId || "unknown"}
                 className="shadow-sm border border-divider w-full overflow-hidden"
               >
-                <CardHeader className="pb-3 md:pb-3">
+                <CardHeader className="pb-2 md:pb-2">
                   <div className="flex items-center justify-between w-full min-w-0">
                     <div className="flex items-center gap-3 min-w-0 flex-1">
                       <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900/30 rounded-full flex items-center justify-center flex-shrink-0">
diff --git a/vite-frontend/src/pages/limit.tsx b/vite-frontend/src/pages/limit.tsx
index 3d260ec..67ba871 100644
--- a/vite-frontend/src/pages/limit.tsx
+++ b/vite-frontend/src/pages/limit.tsx
@@ -237,7 +237,7 @@ export default function LimitPage() {
               key={rule.id}
               className="shadow-sm border border-gray-200 dark:border-gray-700"
             >
-              <CardHeader className="pb-3 md:pb-3">
+              <CardHeader className="pb-2 md:pb-2">
                 <div className="flex justify-between items-start w-full">
                   <div>
                     <h3 className="font-semibold text-foreground">

From c4d807f1c432e372b205604b4fcad52f6ca6645d Mon Sep 17 00:00:00 2001
From: Sagit <sagitchu@gmail.com>
Date: Thu, 19 Feb 2026 10:16:59 +0000
Subject: [PATCH 3/3] fix(frontend): align card body spacing with node cards

---
 vite-frontend/src/pages/forward.tsx             | 2 +-
 vite-frontend/src/pages/limit.tsx               | 4 ++--
 vite-frontend/src/pages/tunnel.tsx              | 2 +-
 vite-frontend/src/pages/user.tsx                | 2 +-
 vite-frontend/src/shadcn-bridge/heroui/card.tsx | 2 +-
 5 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 3dfbf81..036b242 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -1260,7 +1260,7 @@ export default function ForwardPage() {
     return (
       <Card
         key={forward.id}
-        className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
+        className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
       >
         <CardHeader className="pb-2 md:pb-2">
           <div className="flex justify-between items-start w-full">
diff --git a/vite-frontend/src/pages/limit.tsx b/vite-frontend/src/pages/limit.tsx
index 67ba871..a0336c4 100644
--- a/vite-frontend/src/pages/limit.tsx
+++ b/vite-frontend/src/pages/limit.tsx
@@ -235,7 +235,7 @@ export default function LimitPage() {
           {rules.map((rule) => (
             <Card
               key={rule.id}
-              className="shadow-sm border border-gray-200 dark:border-gray-700"
+              className="shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden"
             >
               <CardHeader className="pb-2 md:pb-2">
                 <div className="flex justify-between items-start w-full">
@@ -253,7 +253,7 @@ export default function LimitPage() {
                   </Chip>
                 </div>
               </CardHeader>
-              <CardBody className="pt-0 md:pt-0">
+              <CardBody className="pt-0 pb-3 md:pt-0 md:pb-3">
                 <div className="space-y-3">
                   <div className="flex justify-between items-center">
                     <span className="text-small text-default-600">
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index 347fdd3..372fb2f 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -740,7 +740,7 @@ export default function TunnelPage() {
                     {(listeners) => (
                       <Card
                         key={tunnel.id}
-                        className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
+                        className="group shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
                       >
                         <CardHeader className="pb-2 md:pb-2">
                           <div className="flex justify-between items-start w-full">
diff --git a/vite-frontend/src/pages/user.tsx b/vite-frontend/src/pages/user.tsx
index b4e9841..a196dab 100644
--- a/vite-frontend/src/pages/user.tsx
+++ b/vite-frontend/src/pages/user.tsx
@@ -688,7 +688,7 @@ export default function UserPage() {
             return (
               <Card
                 key={user.id}
-                className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200"
+                className="shadow-sm border border-divider hover:shadow-md transition-shadow duration-200 overflow-hidden"
               >
                 <CardHeader className="pb-2 md:pb-2">
                   <div className="flex justify-between items-start w-full">
diff --git a/vite-frontend/src/shadcn-bridge/heroui/card.tsx b/vite-frontend/src/shadcn-bridge/heroui/card.tsx
index 640f8ee..ec1bda6 100644
--- a/vite-frontend/src/shadcn-bridge/heroui/card.tsx
+++ b/vite-frontend/src/shadcn-bridge/heroui/card.tsx
@@ -16,5 +16,5 @@ export function CardHeader({ className, ...props }: React.ComponentProps<"div">)
 }
 
 export function CardBody({ className, ...props }: React.ComponentProps<"div">) {
-  return <CardContent className={cn("p-4 md:p-6", className)} {...props} />;
+  return <CardContent className={cn("p-4 pt-0 md:p-6 md:pt-0", className)} {...props} />;
 }