mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-10-08 10:46:37 +08:00
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.
This commit is contained in:
@@ -655,7 +655,7 @@ export default function DashboardPage() {
|
|||||||
Good morning, {username}
|
Good morning, {username}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-sm text-default-500 mt-1">
|
<p className="text-sm text-default-500 mt-1">
|
||||||
Here's what's happening with your network today.
|
Here's what's happening with your network today.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-3">
|
<div className="flex items-center gap-3">
|
||||||
|
|||||||
@@ -4176,7 +4176,7 @@ export default function ForwardPage() {
|
|||||||
{sortedForwards.length} 条规则
|
{sortedForwards.length} 条规则
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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
|
<DndContext
|
||||||
collisionDetection={pointerWithin}
|
collisionDetection={pointerWithin}
|
||||||
sensors={sensors}
|
sensors={sensors}
|
||||||
@@ -4188,9 +4188,10 @@ export default function ForwardPage() {
|
|||||||
>
|
>
|
||||||
<Table
|
<Table
|
||||||
aria-label="全部规则列表"
|
aria-label="全部规则列表"
|
||||||
|
className="table-fixed min-w-[1160px]"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
|
||||||
@@ -4328,7 +4329,7 @@ export default function ForwardPage() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`grouped-table-${group.userId}-${group.userName}`}
|
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 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">
|
<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"
|
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"
|
titleClassName="truncate text-sm font-semibold text-default-700"
|
||||||
tunnel={tunnel}
|
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={() =>
|
onToggleCollapsed={() =>
|
||||||
toggleTunnelGroupCollapsed(
|
toggleTunnelGroupCollapsed(
|
||||||
group.userId,
|
group.userId,
|
||||||
@@ -4441,7 +4442,7 @@ export default function ForwardPage() {
|
|||||||
className={`table-fixed ${FORWARD_GROUPED_TABLE_MIN_WIDTH_CLASS}`}
|
className={`table-fixed ${FORWARD_GROUPED_TABLE_MIN_WIDTH_CLASS}`}
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
@@ -492,7 +492,7 @@ export default function GroupPage() {
|
|||||||
aria-label="隧道分组列表"
|
aria-label="隧道分组列表"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
@@ -573,7 +573,7 @@ export default function GroupPage() {
|
|||||||
aria-label="用户分组列表"
|
aria-label="用户分组列表"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
@@ -686,7 +686,7 @@ export default function GroupPage() {
|
|||||||
aria-label="分组权限列表"
|
aria-label="分组权限列表"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
@@ -272,7 +272,7 @@ export default function LimitPage() {
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
@@ -1768,7 +1768,7 @@ export default function NodePage() {
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
|
||||||
|
|||||||
@@ -1339,7 +1339,7 @@ export function MonitorView({ nodeMap, viewMode = "grid" }: MonitorViewProps) {
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
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"
|
className="w-full overflow-x-auto"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
@@ -1249,7 +1249,7 @@ export function TunnelMonitorView({
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
@@ -1601,7 +1601,7 @@ export default function TunnelPage() {
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
|
||||||
|
|||||||
@@ -1081,7 +1081,7 @@ export default function UserPage() {
|
|||||||
className="overflow-x-auto min-w-full"
|
className="overflow-x-auto min-w-full"
|
||||||
classNames={{
|
classNames={{
|
||||||
wrapper:
|
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]",
|
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",
|
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",
|
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
|
||||||
|
|||||||
Reference in New Issue
Block a user