From eaf16bf17b7bcea5a53e63668ead4182458f7afc Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Tue, 21 Apr 2026 14:18:44 +0800
Subject: [PATCH] fix(frontend): enable horizontal scroll on all table lists
 for mobile

Change overflow-hidden to overflow-auto in table wrapper classNames
across all list pages (rules, tunnels, nodes, limits, groups, users,
monitor views). Also add table-fixed min-w to forward all-rules table
and fix unescaped entities in dashboard.
---
 vite-frontend/src/pages/dashboard.tsx                |  2 +-
 vite-frontend/src/pages/forward.tsx                  | 11 ++++++-----
 vite-frontend/src/pages/group.tsx                    |  6 +++---
 vite-frontend/src/pages/limit.tsx                    |  2 +-
 vite-frontend/src/pages/node.tsx                     |  2 +-
 vite-frontend/src/pages/node/monitor-view.tsx        |  4 ++--
 vite-frontend/src/pages/node/tunnel-monitor-view.tsx |  2 +-
 vite-frontend/src/pages/tunnel.tsx                   |  2 +-
 vite-frontend/src/pages/user.tsx                     |  2 +-
 9 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/vite-frontend/src/pages/dashboard.tsx b/vite-frontend/src/pages/dashboard.tsx
index 29df9c2..f9a908f 100644
--- a/vite-frontend/src/pages/dashboard.tsx
+++ b/vite-frontend/src/pages/dashboard.tsx
@@ -655,7 +655,7 @@ export default function DashboardPage() {
             Good morning, {username}
           </h1>
           <p className="text-sm text-default-500 mt-1">
-            Here's what's happening with your network today.
+            Here&apos;s what&apos;s happening with your network today.
           </p>
         </div>
         <div className="flex items-center gap-3">
diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index c6a2948..7b399dd 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
                   {sortedForwards.length} 条规则
                 </span>
               </div>
-              <Card className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
+              <Card className="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
                 <DndContext
                   collisionDetection={pointerWithin}
                   sensors={sensors}
@@ -4188,9 +4188,10 @@ export default function ForwardPage() {
                   >
                     <Table
                       aria-label="全部规则列表"
+                      className="table-fixed min-w-[1160px]"
                       classNames={{
                         wrapper:
-                          "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
+                          "bg-transparent p-0 shadow-none border-none overflow-auto rounded-[24px]",
                         th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                         td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                         tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
@@ -4328,7 +4329,7 @@ export default function ForwardPage() {
               return (
                 <div
                   key={`grouped-table-${group.userId}-${group.userName}`}
-                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                  className="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                 >
                   <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-5 py-4">
                     <div className="flex items-center gap-2">
@@ -4419,7 +4420,7 @@ export default function ForwardPage() {
                               headerClassName="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/20 dark:bg-black/20 backdrop-blur-3xl px-4 py-2.5"
                               titleClassName="truncate text-sm font-semibold text-default-700"
                               tunnel={tunnel}
-                              wrapperClassName="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                              wrapperClassName="rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                               onToggleCollapsed={() =>
                                 toggleTunnelGroupCollapsed(
                                   group.userId,
@@ -4441,7 +4442,7 @@ export default function ForwardPage() {
                                     className={`table-fixed ${FORWARD_GROUPED_TABLE_MIN_WIDTH_CLASS}`}
                                     classNames={{
                                       wrapper:
-                                        "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                                        "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                                       th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                                       td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                                       tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
diff --git a/vite-frontend/src/pages/group.tsx b/vite-frontend/src/pages/group.tsx
index 14e8cd9..bb0e32f 100644
--- a/vite-frontend/src/pages/group.tsx
+++ b/vite-frontend/src/pages/group.tsx
@@ -492,7 +492,7 @@ export default function GroupPage() {
                 aria-label="隧道分组列表"
                 classNames={{
                   wrapper:
-                    "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                   th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                   td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                   tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -573,7 +573,7 @@ export default function GroupPage() {
                 aria-label="用户分组列表"
                 classNames={{
                   wrapper:
-                    "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                   th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                   td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                   tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -686,7 +686,7 @@ export default function GroupPage() {
                 aria-label="分组权限列表"
                 classNames={{
                   wrapper:
-                    "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                   th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                   td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                   tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
diff --git a/vite-frontend/src/pages/limit.tsx b/vite-frontend/src/pages/limit.tsx
index 7753371..b4be918 100644
--- a/vite-frontend/src/pages/limit.tsx
+++ b/vite-frontend/src/pages/limit.tsx
@@ -272,7 +272,7 @@ export default function LimitPage() {
               className="overflow-x-auto min-w-full"
               classNames={{
                 wrapper:
-                  "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
+                  "bg-transparent p-0 shadow-none border-none overflow-auto rounded-[24px]",
                 th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                 td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                 tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 8ca1d73..6687ec4 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -1768,7 +1768,7 @@ export default function NodePage() {
             className="overflow-x-auto min-w-full"
             classNames={{
               wrapper:
-                "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
diff --git a/vite-frontend/src/pages/node/monitor-view.tsx b/vite-frontend/src/pages/node/monitor-view.tsx
index 54b4f58..f08ecee 100644
--- a/vite-frontend/src/pages/node/monitor-view.tsx
+++ b/vite-frontend/src/pages/node/monitor-view.tsx
@@ -1339,7 +1339,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
                 className="overflow-x-auto min-w-full"
                 classNames={{
                   wrapper:
-                    "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                   th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                   td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                   tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
@@ -2021,7 +2021,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
                 className="w-full overflow-x-auto"
                 classNames={{
                   wrapper:
-                    "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                    "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
                   th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                   td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                   tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
diff --git a/vite-frontend/src/pages/node/tunnel-monitor-view.tsx b/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
index e326871..59e9db3 100644
--- a/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
+++ b/vite-frontend/src/pages/node/tunnel-monitor-view.tsx
@@ -1249,7 +1249,7 @@ export function TunnelMonitorView({
             className="overflow-x-auto min-w-full"
             classNames={{
               wrapper:
-                "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index f347695..3ff4455 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -1601,7 +1601,7 @@ export default function TunnelPage() {
               className="overflow-x-auto min-w-full"
               classNames={{
                 wrapper:
-                  "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
+                  "bg-transparent p-0 shadow-none border-none overflow-auto rounded-[24px]",
                 th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                 td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
                 tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
diff --git a/vite-frontend/src/pages/user.tsx b/vite-frontend/src/pages/user.tsx
index 32e1bc1..1bc79b9 100644
--- a/vite-frontend/src/pages/user.tsx
+++ b/vite-frontend/src/pages/user.tsx
@@ -1081,7 +1081,7 @@ export default function UserPage() {
             className="overflow-x-auto min-w-full"
             classNames={{
               wrapper:
-                "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
+                "bg-transparent p-0 shadow-none border-none overflow-auto rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
               tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",