From 139b36d672a51b3a3795188bed8706840186e580 Mon Sep 17 00:00:00 2001
From: Maximus7474 <the.maximus.7474@gmail.com>
Date: Sun, 5 Jul 2026 22:22:05 +0200
Subject: [PATCH 1/2] chore(webpanel): removed padding from layout and let
 pages handle it -> also fixes responsiveness for table pages (players,
 admins, whitelit)

---
 apps/webpanel/package.json                    |  84 ++++----
 .../webpanel/src/components/sidebar/index.tsx |   2 +-
 .../src/components/sidebar/server-status.tsx  |   3 +-
 apps/webpanel/src/pages/console/index.tsx     |   2 +-
 apps/webpanel/src/pages/dashboard/index.tsx   |   7 +-
 .../src/pages/dashboard/playerList.tsx        |  15 +-
 apps/webpanel/src/pages/performance/index.tsx |  70 +++---
 apps/webpanel/src/pages/players/index.tsx     | 142 ++++++-------
 .../webpanel/src/pages/players/playerview.tsx |  92 ++++----
 apps/webpanel/src/pages/resources/index.tsx   |   8 +-
 .../src/pages/settings/admincreate.tsx        |   2 +-
 .../src/pages/settings/adminmanagement.tsx    | 129 ++++++-----
 .../webpanel/src/pages/settings/adminview.tsx |  30 +--
 .../webpanel/src/pages/settings/auditlogs.tsx |   4 +-
 .../src/pages/settings/configeditor.tsx       |   2 +-
 .../src/pages/settings/groupmanagement.tsx    | 164 +++++++-------
 apps/webpanel/src/pages/settings/index.tsx    |   2 +-
 apps/webpanel/src/pages/whitelist/index.tsx   | 200 +++++++++---------
 18 files changed, 475 insertions(+), 483 deletions(-)

diff --git a/apps/webpanel/package.json b/apps/webpanel/package.json
index 80b3b6d6..67b60a06 100644
--- a/apps/webpanel/package.json
+++ b/apps/webpanel/package.json
@@ -1,44 +1,44 @@
 {
-  "name": "@fxmanager/webpanel",
-  "version": "0.2.1",
-  "type": "module",
-  "private": true,
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "lint": "biome check .",
-    "format": "biome format --write .",
-    "typecheck": "tsc --noEmit",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "@codemirror/commands": "^6.10.4",
-    "@codemirror/language": "^6.12.4",
-    "@codemirror/state": "^6.7.0",
-    "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.43.4",
-    "@fxmanager/shared": "workspace:*",
-    "@fxmanager/ui": "workspace:*",
-    "@lezer/highlight": "^1.2.3",
-    "ansi-to-react": "^6.2.6",
-    "codemirror": "^6.0.2",
-    "date-fns": "^4.2.1",
-    "lucide-react": "^1.0.1",
-    "react": "^19.2.4",
-    "react-day-picker": "^10.0.1",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "recharts": "3.8.0",
-    "sonner": "^2.0.7"
-  },
-  "devDependencies": {
-    "@fxmanager/database": "workspace:*",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.1",
-    "typescript": "^5.9.3",
-    "vite": "^7.2.4"
-  }
+	"name": "@fxmanager/webpanel",
+	"version": "0.2.1",
+	"type": "module",
+	"private": true,
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "biome check .",
+		"format": "biome format --write .",
+		"typecheck": "tsc --noEmit",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@codemirror/commands": "^6.10.4",
+		"@codemirror/language": "^6.12.4",
+		"@codemirror/state": "^6.7.0",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"@codemirror/view": "^6.43.4",
+		"@fxmanager/shared": "workspace:*",
+		"@fxmanager/ui": "workspace:*",
+		"@lezer/highlight": "^1.2.3",
+		"ansi-to-react": "^6.2.6",
+		"codemirror": "^6.0.2",
+		"date-fns": "^4.2.1",
+		"lucide-react": "^1.0.1",
+		"react": "^19.2.4",
+		"react-day-picker": "^10.0.1",
+		"react-dom": "^19.2.4",
+		"react-router-dom": "^7.13.2",
+		"recharts": "3.8.0",
+		"sonner": "^2.0.7"
+	},
+	"devDependencies": {
+		"@fxmanager/database": "workspace:*",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/node": "^25.1.0",
+		"@types/react": "^19.2.10",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.1.1",
+		"typescript": "^5.9.3",
+		"vite": "^7.2.4"
+	}
 }
diff --git a/apps/webpanel/src/components/sidebar/index.tsx b/apps/webpanel/src/components/sidebar/index.tsx
index 9931a2e3..1bd27a81 100644
--- a/apps/webpanel/src/components/sidebar/index.tsx
+++ b/apps/webpanel/src/components/sidebar/index.tsx
@@ -10,7 +10,7 @@ export default function AppLayout() {
 		<SidebarProvider className="h-screen overflow-hidden">
 			<AppSidebar />
 			<SidebarInset className="h-screen overflow-hidden">
-				<div className="flex flex-col h-full overflow-hidden p-4 gap-4">
+				<div className="flex flex-col h-full overflow-hidden gap-4">
 					<Outlet />
 				</div>
 			</SidebarInset>
diff --git a/apps/webpanel/src/components/sidebar/server-status.tsx b/apps/webpanel/src/components/sidebar/server-status.tsx
index 3d1a91d3..4356f3ad 100644
--- a/apps/webpanel/src/components/sidebar/server-status.tsx
+++ b/apps/webpanel/src/components/sidebar/server-status.tsx
@@ -256,7 +256,8 @@ export function ServerStatusCard() {
 								>
 									<ArrowUpCircle className="h-3.5 w-3.5 shrink-0" />
 									<span className="flex-1">
-										<span className="font-mono">{version.latest}</span> available
+										<span className="font-mono">{version.latest}</span>{' '}
+										available
 									</span>
 									<ExternalLink className="h-3 w-3 shrink-0" />
 								</a>
diff --git a/apps/webpanel/src/pages/console/index.tsx b/apps/webpanel/src/pages/console/index.tsx
index 824838bd..6a6e5e62 100644
--- a/apps/webpanel/src/pages/console/index.tsx
+++ b/apps/webpanel/src/pages/console/index.tsx
@@ -156,7 +156,7 @@ export default function Console() {
 	}, []);
 
 	return (
-		<div className="flex h-full flex-col gap-4">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader Icon={Terminal} title="Console" />
 
 			<Card className="flex flex-1 flex-col min-h-0 pb-0 overflow-hidden gap-0.5">
diff --git a/apps/webpanel/src/pages/dashboard/index.tsx b/apps/webpanel/src/pages/dashboard/index.tsx
index f8996358..ed27bc21 100644
--- a/apps/webpanel/src/pages/dashboard/index.tsx
+++ b/apps/webpanel/src/pages/dashboard/index.tsx
@@ -133,8 +133,8 @@ export default function DashboardPage() {
 	];
 
 	return (
-		<ScrollArea className="h-screen overflow-auto pr-2 pb-2">
-			<div className="space-y-6">
+		<ScrollArea className="h-screen overflow-auto">
+			<div className="space-y-6 p-4">
 				<PageHeader
 					Icon={LayoutDashboard}
 					title="Dashboard"
@@ -169,6 +169,8 @@ export default function DashboardPage() {
 				</ScrollArea>
 
 				<div className="grid gap-6 lg:grid-cols-3">
+					{' '}
+					{/* The cards in this section have their edges cropped out */}
 					<div className="lg:col-span-2 space-y-6">
 						<Card className="bg-card/50 min-h-[350px] w-full">
 							<CardHeader>
@@ -246,7 +248,6 @@ export default function DashboardPage() {
 							</CardContent>
 						</Card>
 					</div>
-
 					<div className="lg:col-span-1">
 						<Card className="bg-card/50 flex flex-col h-full">
 							<CardHeader>
diff --git a/apps/webpanel/src/pages/dashboard/playerList.tsx b/apps/webpanel/src/pages/dashboard/playerList.tsx
index c7f1004c..914a5a87 100644
--- a/apps/webpanel/src/pages/dashboard/playerList.tsx
+++ b/apps/webpanel/src/pages/dashboard/playerList.tsx
@@ -68,16 +68,17 @@ export default function PlayerListPage() {
 	const { players, loading } = usePlayerlistSocket();
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader
 				Icon={BookUser}
 				title="Player List"
 				description="Current connected players on the server."
 			/>
-			<Card className="bg-card/50 py-0">
-				<div className="overflow-hidden rounded-t-lg">
-					<Table className="w-full">
-						<TableHeader className="bg-card block w-full">
+
+			<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
+				<div className="rounded-t-lg flex-1 flex flex-col min-h-0">
+					<Table className="w-full flex-1 flex flex-col">
+						<TableHeader className="bg-card block w-full shrink-0">
 							<TableRow className={`grid ${COL_GRID} w-full`}>
 								<TableHead className="flex items-center">#</TableHead>
 								<TableHead className="flex items-center">Player</TableHead>
@@ -97,8 +98,8 @@ export default function PlayerListPage() {
 							</TableRow>
 						</TableHeader>
 
-						<TableBody className="block w-full">
-							<ScrollArea className="h-[65vh]">
+						<TableBody className="block w-full flex-1 min-h-0">
+							<ScrollArea className="h-full">
 								{loading ? (
 									Array.from({ length: 6 }).map((_, i) => (
 										// biome-ignore lint/suspicious/noArrayIndexKey: indexes are immutable
diff --git a/apps/webpanel/src/pages/performance/index.tsx b/apps/webpanel/src/pages/performance/index.tsx
index f6039e0e..03f7e119 100644
--- a/apps/webpanel/src/pages/performance/index.tsx
+++ b/apps/webpanel/src/pages/performance/index.tsx
@@ -10,6 +10,7 @@ import type { PerfInspect } from './components/perf-series';
 import { usePerfSocket } from '@/hooks/ws-channels/use-perf';
 import { usePerfSeries } from '@/hooks/ws-channels/use-perf-series';
 import { useWsChannel } from '@/hooks/ws-channels/use-ws-core';
+import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';
 
 export default function PerformancePage() {
 	const { samples } = usePerfSocket();
@@ -65,42 +66,45 @@ export default function PerformancePage() {
 	}, [inspect, selected, isLive, snapshots]);
 
 	return (
-		<div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto">
-			<PageHeader
-				Icon={ChartBar}
-				title="Performance"
-				description="Monitor fxServer thread distribution and system resource usage."
-			/>
+		<ScrollArea className="h-full">
+			<div className="flex min-h-0 flex-1 flex-col gap-6 p-4 overflow-y-auto">
+				<PageHeader
+					Icon={ChartBar}
+					title="Performance"
+					description="Monitor fxServer thread distribution and system resource usage."
+				/>
 
-			<PerfStatsGrid samples={samples} inspect={effectiveInspect} />
+				<PerfStatsGrid samples={samples} inspect={effectiveInspect} />
 
-			<div className="grid gap-6 lg:grid-cols-2">
-				<DisconnectDonut
-					sessionId={selectedId}
-					session={selected}
-					isLive={isLive}
-					zoom={zoom}
-				/>
-				<PerfDistribution
-					samples={samples}
-					inspect={effectiveInspect}
-					thread={thread}
-				/>
-			</div>
+				<div className="grid gap-6 lg:grid-cols-2">
+					<DisconnectDonut
+						sessionId={selectedId}
+						session={selected}
+						isLive={isLive}
+						zoom={zoom}
+					/>
+					<PerfDistribution
+						samples={samples}
+						inspect={effectiveInspect}
+						thread={thread}
+					/>
+				</div>
 
-			<div className="flex min-h-[360px] flex-1 flex-col">
-				<FullPerfChart
-					thread={thread}
-					onThreadChange={setThread}
-					snapshots={snapshots}
-					sessions={sessions}
-					selectedId={selectedId}
-					onSelect={setPickedId}
-					zoom={zoom}
-					onZoomChange={setZoom}
-					onInspect={setInspect}
-				/>
+				<div className="flex min-h-[360px] flex-1 flex-col">
+					<FullPerfChart
+						thread={thread}
+						onThreadChange={setThread}
+						snapshots={snapshots}
+						sessions={sessions}
+						selectedId={selectedId}
+						onSelect={setPickedId}
+						zoom={zoom}
+						onZoomChange={setZoom}
+						onInspect={setInspect}
+					/>
+				</div>
 			</div>
-		</div>
+			<ScrollBar orientation="vertical" />
+		</ScrollArea>
 	);
 }
diff --git a/apps/webpanel/src/pages/players/index.tsx b/apps/webpanel/src/pages/players/index.tsx
index 1167a8aa..6f5296ed 100644
--- a/apps/webpanel/src/pages/players/index.tsx
+++ b/apps/webpanel/src/pages/players/index.tsx
@@ -22,7 +22,7 @@ import { QueryService } from '@/lib/query';
 import { useDebounce } from '@/hooks/use-debounce';
 import { formatDuration } from '@/lib/utils';
 import { useNavigate, useSearchParams } from 'react-router-dom';
-import { ScrollArea } from '@fxmanager/ui/components/scroll-area';
+import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';
 import { usePlayerAction } from '@/hooks/use-player-actions';
 import { PlayerActionDialog } from '@/components/player-actions-dialog';
 import { PageHeader } from '@/components/page-header';
@@ -133,11 +133,11 @@ export default function Players() {
 	}, [debouncedSearch, sortBy, sortOrder, page, pageSize]);
 
 	return (
-		<div className="space-y-6">
+		<div className="flex flex-col gap-6 h-full p-4">
 			<PageHeader Icon={Users} title="Players" />
 
-			<div className="flex items-center gap-3">
-				<div className="relative flex-1 max-w-sm">
+			<div className="flex flex-wrap items-center gap-3 shrink-0">
+				<div className="relative flex-1 min-w-[200px] max-w-sm">
 					<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
 					<Input
 						placeholder="Search by name or identifier..."
@@ -168,16 +168,10 @@ export default function Players() {
 				</Button>
 			</div>
 
-			{/* ToDo:
-        find a solution for mobile display as this fucks up, options:
-        * Dynamically display columns on mobile (only show active filter)
-        * Don't show extra columns
-
-      */}
-			<Card className="bg-card/50 py-0">
-				<div className="overflow-hidden rounded-t-lg">
-					<Table className="table-fixed w-full">
-						<TableHeader className="bg-card block w-full">
+			<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
+				<ScrollArea className="rounded-t-lg flex-1 w-full max-w-full">
+					<Table className="table-fixed w-full min-w-[800px]">
+						<TableHeader className="bg-card sticky top-0 z-10 block w-full shadow-sm">
 							<TableRow className="flex w-full">
 								<TableHead className="pl-4 flex-1 flex items-center">
 									Name
@@ -194,71 +188,75 @@ export default function Players() {
 								<TableHead className="w-70 flex items-center" />
 							</TableRow>
 						</TableHeader>
+
 						<TableBody className="block w-full">
-							<ScrollArea className="h-[65vh]">
-								{loading ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={5}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											Loading...
+							{loading ? (
+								<TableRow className="flex w-full">
+									<TableCell
+										colSpan={5}
+										className="flex-1 text-center text-muted-foreground"
+									>
+										Loading...
+									</TableCell>
+								</TableRow>
+							) : players.length === 0 ? (
+								<TableRow className="flex w-full">
+									<TableCell
+										colSpan={5}
+										className="flex-1 text-center text-muted-foreground"
+									>
+										{search
+											? `No players matching "${search}"`
+											: 'No players found'}
+									</TableCell>
+								</TableRow>
+							) : (
+								players.map((p) => (
+									<TableRow
+										key={p.id}
+										className="flex w-full items-center"
+										onClick={() => navigate(`/players/${p.id}`)}
+									>
+										<TableCell className="font-medium pl-4 flex-1 truncate">
+											{p.name}
+											{p.isStaff && (
+												<Badge variant="link" className="ml-2 text-xs">
+													Staff
+												</Badge>
+											)}
 										</TableCell>
-									</TableRow>
-								) : players.length === 0 ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={5}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											{search
-												? `No players matching "${search}"`
-												: 'No players found'}
+										<TableCell className="text-sm text-muted-foreground flex-1">
+											{new Date(p.firstSeen).toLocaleDateString()}
+										</TableCell>
+										<TableCell className="text-sm text-muted-foreground flex-1">
+											{new Date(p.lastSeen).toLocaleString()}
+										</TableCell>
+										<TableCell className="text-sm text-muted-foreground flex-1">
+											{formatDuration(p.playtime)}
+										</TableCell>
+										<TableCell className="w-70 flex justify-around">
+											<Button
+												size="sm"
+												variant="outline"
+												className="h-7 w-30"
+												onClick={(e) => {
+													e.stopPropagation();
+													openAction(p);
+												}}
+											>
+												<ShieldAlert className="mr-1.5 h-3.5 w-3.5" /> Actions
+											</Button>
 										</TableCell>
 									</TableRow>
-								) : (
-									players.map((p) => (
-										<TableRow
-											key={p.id}
-											className="flex w-full items-center"
-											onClick={() => navigate(`/players/${p.id}`)}
-										>
-											<TableCell className="font-medium pl-4 flex-1 truncate">
-												{p.name}
-												{p.isStaff && (
-													<Badge variant="link" className="ml-2 text-xs">
-														Staff
-													</Badge>
-												)}
-											</TableCell>
-											<TableCell className="text-sm text-muted-foreground flex-1">
-												{new Date(p.firstSeen).toLocaleDateString()}
-											</TableCell>
-											<TableCell className="text-sm text-muted-foreground flex-1">
-												{new Date(p.lastSeen).toLocaleString()}
-											</TableCell>
-											<TableCell className="text-sm text-muted-foreground flex-1">
-												{formatDuration(p.playtime)}
-											</TableCell>
-											<TableCell className="w-70 flex justify-around">
-												<Button
-													size="sm"
-													variant="outline"
-													className="h-7 w-30"
-													onClick={() => openAction(p)}
-												>
-													<ShieldAlert className="mr-1.5 h-3.5 w-3.5" /> Actions
-												</Button>
-											</TableCell>
-										</TableRow>
-									))
-								)}
-							</ScrollArea>
+								))
+							)}
 						</TableBody>
 					</Table>
-				</div>
 
-				<div className="flex items-center justify-between px-4 py-4 border-t border-border bg-card">
+					<ScrollBar orientation="horizontal" className="hidden" />
+				</ScrollArea>
+
+				<div className="flex flex-wrap items-center justify-between gap-4 px-4 py-4 border-t border-border bg-card shrink-0">
 					<PageSizeSelector
 						pageSize={pageSize}
 						setPageSize={setPageSize}
diff --git a/apps/webpanel/src/pages/players/playerview.tsx b/apps/webpanel/src/pages/players/playerview.tsx
index ddb698d5..f80c0e01 100644
--- a/apps/webpanel/src/pages/players/playerview.tsx
+++ b/apps/webpanel/src/pages/players/playerview.tsx
@@ -161,8 +161,8 @@ export default function PlayerView() {
 		punishments.kicks.length;
 
 	return (
-		<div>
-			<div className="flex items-center gap-3 my-4">
+		<div className="flex flex-col gap-4 h-full p-4">
+			<div className="flex items-center gap-3 shrink-0">
 				<Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
 					<ArrowLeft className="h-4 w-4" />
 				</Button>
@@ -197,35 +197,37 @@ export default function PlayerView() {
 				</Button>
 			</div>
 
-			<ScrollArea className="h-[calc(100vh-7rem)]">
-				<div className="space-y-6 pt-2 pb-0 pl-0 pr-4">
-					<div className="flex flex-wrap gap-3">
-						<StatCard
-							icon={Clock}
-							label="Playtime"
-							value={formatDuration(playerData.playtime)}
-						/>
-						<StatCard
-							icon={User}
-							label="First Seen"
-							value={formatDate(playerData.firstSeen)}
-						/>
-						<StatCard
-							icon={User}
-							label="Last Seen"
-							value={formatDate(playerData.lastSeen)}
-						/>
-						<StatCard
-							icon={Hammer}
-							label="Punishments"
-							value={
-								totalPunishments > 0 ? (
-									<span className="text-destructive">{totalPunishments}</span>
-								) : (
-									'None'
-								)
-							}
-						/>
+			<ScrollArea className="flex-1 min-h-0">
+				<div className="space-y-4 p-1">
+					<div className="space-y-6">
+						<div className="flex flex-wrap gap-3">
+							<StatCard
+								icon={Clock}
+								label="Playtime"
+								value={formatDuration(playerData.playtime)}
+							/>
+							<StatCard
+								icon={User}
+								label="First Seen"
+								value={formatDate(playerData.firstSeen)}
+							/>
+							<StatCard
+								icon={User}
+								label="Last Seen"
+								value={formatDate(playerData.lastSeen)}
+							/>
+							<StatCard
+								icon={Hammer}
+								label="Punishments"
+								value={
+									totalPunishments > 0 ? (
+										<span className="text-destructive">{totalPunishments}</span>
+									) : (
+										'None'
+									)
+								}
+							/>
+						</div>
 					</div>
 
 					<Card>
@@ -256,7 +258,7 @@ export default function PlayerView() {
 					<AdminProfile adminProfile={playerData.adminProfile} />
 
 					<Tabs defaultValue="ban" onValueChange={handleTabChange}>
-						<TabsList className="w-full justify-start flex-wrap h-auto">
+						<TabsList className="w-full justify-start flex-wrap h-auto mt-2">
 							<TabsTrigger value="ban" className="gap-1.5">
 								<Ban className="h-3.5 w-3.5" />
 								Bans
@@ -319,7 +321,7 @@ export default function PlayerView() {
 							</TabsTrigger>
 						</TabsList>
 
-						<TabsContent value="ban" className="mt-4">
+						<TabsContent value="ban" className="mt-2">
 							<Card>
 								<CardContent className="p-0 overflow-auto">
 									<BansTab
@@ -331,7 +333,7 @@ export default function PlayerView() {
 							</Card>
 						</TabsContent>
 
-						<TabsContent value="warn" className="mt-4">
+						<TabsContent value="warn" className="mt-2">
 							<Card>
 								<CardContent className="p-0 overflow-auto">
 									<WarnsTab
@@ -343,7 +345,7 @@ export default function PlayerView() {
 							</Card>
 						</TabsContent>
 
-						<TabsContent value="kick" className="mt-4">
+						<TabsContent value="kick" className="mt-2">
 							<Card>
 								<CardContent className="p-0 overflow-auto">
 									<KicksTab
@@ -355,7 +357,7 @@ export default function PlayerView() {
 							</Card>
 						</TabsContent>
 
-						<TabsContent value="report" className="mt-4">
+						<TabsContent value="report" className="mt-2">
 							<Card>
 								<CardContent className="p-0 overflow-auto">
 									<ReportsTab reports={playerData.reports} />
@@ -363,7 +365,7 @@ export default function PlayerView() {
 							</Card>
 						</TabsContent>
 
-						<TabsContent value="note" className="mt-4">
+						<TabsContent value="note" className="mt-2">
 							<Card>
 								<CardContent className="p-0 overflow-auto">
 									<NotesTab notes={playerData.notes} />
@@ -372,15 +374,15 @@ export default function PlayerView() {
 						</TabsContent>
 					</Tabs>
 				</div>
-
-				<PlayerActionDialog
-					player={dialogPlayer}
-					open={dialogOpen}
-					defaultTab={actionTab}
-					onClose={closeAction}
-					onSuccess={refetch}
-				/>
 			</ScrollArea>
+
+			<PlayerActionDialog
+				player={dialogPlayer}
+				open={dialogOpen}
+				defaultTab={actionTab}
+				onClose={closeAction}
+				onSuccess={refetch}
+			/>
 		</div>
 	);
 }
diff --git a/apps/webpanel/src/pages/resources/index.tsx b/apps/webpanel/src/pages/resources/index.tsx
index 3dbdb794..5fc5a6eb 100644
--- a/apps/webpanel/src/pages/resources/index.tsx
+++ b/apps/webpanel/src/pages/resources/index.tsx
@@ -213,7 +213,7 @@ export function ResourceList() {
 	}
 
 	return (
-		<div className="space-y-4 text-zinc-900 dark:text-zinc-50">
+		<div className="flex flex-col gap-4 text-zinc-900 dark:text-zinc-50 h-full p-4">
 			<div className="flex justify-between items-end">
 				<PageHeader
 					Icon={LayoutList}
@@ -305,14 +305,14 @@ export function ResourceList() {
 
 			<div
 				className={cn(
-					'h-[calc(100vh-13rem)] rounded-md border border-zinc-200 dark:border-zinc-800 p-4 pr-1',
+					'flex-1 flex flex-col min-h-0 rounded-md border border-zinc-200 dark:border-zinc-800 p-4 pr-1',
 					(loading || state.status !== 'running') && 'overflow-hidden',
 				)}
 			>
 				{loading || state.status === 'starting' ? (
 					<LoadingSkeleton />
 				) : state.status === 'running' ? (
-					<ScrollArea className="h-[calc(100vh-15rem)] pr-3">
+					<ScrollArea className="h-full pr-3">
 						<div className="grid gap-4">
 							{displayedResources.length > 0 ? (
 								displayedResources.map((res) => (
@@ -413,7 +413,7 @@ export function ResourceList() {
 						</div>
 					</ScrollArea>
 				) : (
-					<div className="relative overflow-hidden h-[calc(100vh-15rem)] pr-3">
+					<div className="relative overflow-hidden h-full pr-3">
 						<LoadingSkeleton blur />
 						<div className="absolute top-6 left-1/2 -translate-x-1/2 z-10 pointer-events-none">
 							<div className="pointer-events-auto">
diff --git a/apps/webpanel/src/pages/settings/admincreate.tsx b/apps/webpanel/src/pages/settings/admincreate.tsx
index c837886b..1419908c 100644
--- a/apps/webpanel/src/pages/settings/admincreate.tsx
+++ b/apps/webpanel/src/pages/settings/admincreate.tsx
@@ -64,7 +64,7 @@ export default function AdminCreate() {
 	}
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4 overflow-hidden">
+		<div className="flex h-full flex-col p-4 gap-4 overflow-hidden">
 			<PageHeader
 				Icon={UserPlus}
 				title="Create Admin"
diff --git a/apps/webpanel/src/pages/settings/adminmanagement.tsx b/apps/webpanel/src/pages/settings/adminmanagement.tsx
index 0da87d7d..da1d678e 100644
--- a/apps/webpanel/src/pages/settings/adminmanagement.tsx
+++ b/apps/webpanel/src/pages/settings/adminmanagement.tsx
@@ -24,7 +24,7 @@ import {
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import { useDebounce } from '@/hooks/use-debounce';
 import { Button } from '@fxmanager/ui/components/button';
-import { ScrollArea } from '@fxmanager/ui/components/scroll-area';
+import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';
 import PageSizeSelector from '@/components/page-size-selector';
 import PageSelector from '@/components/page-selector';
 import { GroupBadge } from '@/components/group-badge';
@@ -133,7 +133,7 @@ export default function AdminManagementList() {
 	}, [debouncedSearch, sortBy, sortOrder, page, pageSize]);
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+		<div className="flex flex-col gap-6 h-full p-4">
 			<PageHeader
 				Icon={ShieldUser}
 				title="Admin Management"
@@ -182,16 +182,10 @@ export default function AdminManagementList() {
 				</Button>
 			</div>
 
-			{/* ToDo:
-        find a solution for mobile display as this fucks up, options:
-        * Dynamically display columns on mobile (only show active filter)
-        * Don't show extra columns
-      */}
-
-			<Card className="bg-card/50 py-0">
-				<div className="overflow-hidden rounded-t-lg">
-					<Table className="table-fixed w-full">
-						<TableHeader className="bg-card block w-full">
+			<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
+				<ScrollArea className="rounded-t-lg flex-1 w-full max-w-full">
+					<Table className="table-fixed w-full min-w-[800px]">
+						<TableHeader className="bg-card sticky top-0 z-10 block w-full shadow-sm">
 							<TableRow className="flex w-full">
 								<TableHead className="pl-4 flex-1 flex items-center">
 									Name
@@ -206,68 +200,69 @@ export default function AdminManagementList() {
 								<TableHead className="w-70 flex items-center" />
 							</TableRow>
 						</TableHeader>
+
 						<TableBody className="block w-full">
-							<ScrollArea className="h-[65vh]">
-								{loading ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={5}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											Loading...
+							{loading ? (
+								<TableRow className="flex w-full">
+									<TableCell
+										colSpan={5}
+										className="flex-1 text-center text-muted-foreground"
+									>
+										Loading...
+									</TableCell>
+								</TableRow>
+							) : admins.length === 0 ? (
+								<TableRow className="flex w-full">
+									<TableCell
+										colSpan={5}
+										className="flex-1 text-center text-muted-foreground"
+									>
+										{search
+											? `No admins matching "${search}"`
+											: 'No admins found'}
+									</TableCell>
+								</TableRow>
+							) : (
+								admins.map((a) => (
+									<TableRow
+										key={a.id}
+										className="flex w-full items-center"
+										onClick={() => navigate(`/settings/admins/${a.id}`)}
+									>
+										<TableCell className="font-medium pl-4 flex-1 flex items-center gap-2 truncate">
+											<span>{a.username}</span>
 										</TableCell>
-									</TableRow>
-								) : admins.length === 0 ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={5}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											{search
-												? `No admins matching "${search}"`
-												: 'No admins found'}
+										<TableCell className="flex-1 flex items-center gap-2 truncate">
+											{a.group && <GroupBadge group={a.group} />}
+										</TableCell>
+										<TableCell className="text-sm text-muted-foreground flex-1">
+											{new Date(a.createdAt).toLocaleDateString()}
+										</TableCell>
+										<TableCell className="text-sm text-muted-foreground flex-1">
+											{a.lastLoginAt
+												? new Date(a.lastLoginAt).toLocaleString()
+												: 'N/A'}
+										</TableCell>
+										<TableCell className="w-70 flex justify-around">
+											<Button
+												size="sm"
+												variant="outline"
+												className="h-7 w-37"
+												onClick={() => {}}
+											>
+												<Settings className="mr-1.5 h-3.5 w-3.5" /> Edit
+											</Button>
 										</TableCell>
 									</TableRow>
-								) : (
-									admins.map((a) => (
-										<TableRow
-											key={a.id}
-											className="flex w-full items-center"
-											onClick={() => navigate(`/settings/admins/${a.id}`)}
-										>
-											<TableCell className="font-medium pl-4 flex-1 flex items-center gap-2 truncate">
-												<span>{a.username}</span>
-											</TableCell>
-											<TableCell className="flex-1 flex items-center gap-2 truncate">
-												{a.group && <GroupBadge group={a.group} />}
-											</TableCell>
-											<TableCell className="text-sm text-muted-foreground flex-1">
-												{new Date(a.createdAt).toLocaleDateString()}
-											</TableCell>
-											<TableCell className="text-sm text-muted-foreground flex-1">
-												{a.lastLoginAt
-													? new Date(a.lastLoginAt).toLocaleString()
-													: 'N/A'}
-											</TableCell>
-											<TableCell className="w-70 flex justify-around">
-												<Button
-													size="sm"
-													variant="outline"
-													className="h-7 w-37"
-													onClick={() => {}}
-												>
-													<Settings className="mr-1.5 h-3.5 w-3.5" /> Edit
-												</Button>
-											</TableCell>
-										</TableRow>
-									))
-								)}
-							</ScrollArea>
+								))
+							)}
 						</TableBody>
 					</Table>
-				</div>
 
-				<div className="flex items-center justify-between px-4 py-4 border-t border-border bg-card">
+					<ScrollBar orientation="horizontal" className="hidden" />
+				</ScrollArea>
+
+				<div className="flex flex-wrap items-center justify-between gap-4 px-4 py-4 border-t border-border bg-card shrink-0">
 					<PageSizeSelector
 						pageSize={pageSize}
 						setPageSize={setPageSize}
diff --git a/apps/webpanel/src/pages/settings/adminview.tsx b/apps/webpanel/src/pages/settings/adminview.tsx
index 294e7843..2367cb61 100644
--- a/apps/webpanel/src/pages/settings/adminview.tsx
+++ b/apps/webpanel/src/pages/settings/adminview.tsx
@@ -232,9 +232,9 @@ export default function AdminView() {
 	const isMaster = PermissionManager.isMaster(adminData.permissions);
 
 	return (
-		<div>
-			<div className="flex flex-row justify-between items-center pr-4">
-				<div className="flex items-center gap-3 my-4">
+		<div className="flex flex-col h-full p-4 gap-4">
+			<div className="flex flex-row justify-between items-center shrink-0">
+				<div className="flex items-center gap-3">
 					<Button variant="ghost" size="icon" onClick={() => navigate(-1)}>
 						<ArrowLeft className="h-4 w-4" />
 					</Button>
@@ -306,8 +306,8 @@ export default function AdminView() {
 				</div>
 			</div>
 
-			<div className="space-y-6 pt-2 pb-0 pl-0 pr-4">
-				<div className="flex flex-wrap gap-3 flex-col md:flex-row">
+			<div className="flex-1 flex flex-col min-h-0 gap-6">
+				<div className="flex flex-wrap gap-3 shrink-0">
 					<StatCard
 						icon={FileUser}
 						label="Linked Player"
@@ -345,21 +345,24 @@ export default function AdminView() {
 					/>
 				</div>
 
-				<Tabs defaultValue="activity" className="w-full">
+				<Tabs defaultValue="activity" className="flex-1 flex flex-col min-h-0">
 					<TabsList className="grid w-full grid-cols-2 mb-4">
 						<TabsTrigger value="activity">Recent Activity</TabsTrigger>
 						<TabsTrigger value="settings">Permissions</TabsTrigger>
 					</TabsList>
 
-					<TabsContent value="activity">
-						<Card>
+					<TabsContent
+						value="activity"
+						className="flex-1 flex flex-col min-h-0 mt-0"
+					>
+						<Card className="flex-1 flex flex-col min-h-0">
 							<CardHeader>
 								<CardTitle className="text-lg font-bold">
 									Action Recap
 								</CardTitle>
 							</CardHeader>
 							<CardContent>
-								<ScrollArea className="min-h-[40vh] h-[calc(100vh-27rem)]">
+								<ScrollArea className="h-full">
 									{!hasPermission(UserPermissions.AUDIT_LOG) ? (
 										<Alert
 											variant="destructive"
@@ -397,15 +400,18 @@ export default function AdminView() {
 						</Card>
 					</TabsContent>
 
-					<TabsContent value="settings" className="mt-0 outline-none">
-						<Card className="h-[100vh] md:h-[64vh] flex flex-col overflow-hidden">
+					<TabsContent
+						value="settings"
+						className="flex-1 flex flex-col min-h-0 mt-0"
+					>
+						<Card className="flex-1 flex flex-col min-h-0">
 							<CardHeader className="shrink-0">
 								<CardTitle className="text-lg font-bold">
 									Permissions Editor
 								</CardTitle>
 							</CardHeader>
 
-							<CardContent className="flex-1 flex flex-col min-h-0 px-6 pt-0 overflow-hidden">
+							<CardContent className="flex-1 overflow-hidden">
 								{isMaster ? (
 									<Alert
 										variant="destructive"
diff --git a/apps/webpanel/src/pages/settings/auditlogs.tsx b/apps/webpanel/src/pages/settings/auditlogs.tsx
index eb380d92..4f29bc28 100644
--- a/apps/webpanel/src/pages/settings/auditlogs.tsx
+++ b/apps/webpanel/src/pages/settings/auditlogs.tsx
@@ -147,14 +147,14 @@ export default function AuditLogPage() {
 	};
 
 	return (
-		<div className="flex h-[calc(100vh-2rem)] flex-col gap-6">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader
 				Icon={ScrollText}
 				title="Audit Logs"
 				description="Audit log view for fxManager actions."
 			/>
 
-			<div className="flex flex-wrap justify-between items-end border-b border-border/60 pb-4">
+			<div className="flex flex-wrap justify-between items-end border-b border-border/60 pb-4 mt-2">
 				<div className="flex flex-wrap items-end gap-4">
 					<div className="flex flex-col gap-1.5">
 						<Label className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
diff --git a/apps/webpanel/src/pages/settings/configeditor.tsx b/apps/webpanel/src/pages/settings/configeditor.tsx
index 13c6ac90..9199df7d 100644
--- a/apps/webpanel/src/pages/settings/configeditor.tsx
+++ b/apps/webpanel/src/pages/settings/configeditor.tsx
@@ -248,7 +248,7 @@ export default function ConfigEditor() {
 	};
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4 overflow-hidden">
+		<div className="flex h-full flex-col gap-4 p-4 overflow-hidden">
 			<PageHeader
 				Icon={FileCog}
 				title="Config Editor"
diff --git a/apps/webpanel/src/pages/settings/groupmanagement.tsx b/apps/webpanel/src/pages/settings/groupmanagement.tsx
index a7b6fc70..6485522b 100644
--- a/apps/webpanel/src/pages/settings/groupmanagement.tsx
+++ b/apps/webpanel/src/pages/settings/groupmanagement.tsx
@@ -34,7 +34,7 @@ import {
 } from '@fxmanager/ui/components/dynamic-icon';
 import { Input } from '@fxmanager/ui/components/input';
 import { Label } from '@fxmanager/ui/components/label';
-import { ScrollArea } from '@fxmanager/ui/components/scroll-area';
+import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';
 import {
 	Table,
 	TableBody,
@@ -214,26 +214,26 @@ export default function GroupManagement() {
 	}
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader
 				Icon={UsersRound}
 				title="Permission Groups"
 				description="Define permission sets and assign admins to them."
 			/>
 
-			<div className="flex flex-row justify-end">
+			<div className="flex flex-row justify-end shrink-0">
 				<Button onClick={() => setDialog('new')}>
 					<Plus />
 					<span className="hidden lg:block">Create Group</span>
 				</Button>
 			</div>
 
-			<Card className="bg-card/50 py-0">
-				<div className="overflow-hidden rounded-lg">
-					<Table className="table-fixed w-full">
-						<TableHeader className="bg-card block w-full">
+			<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
+				<ScrollArea className="flex-1 w-full max-w-full rounded-lg">
+					<Table className="table-fixed w-full min-w-[600px]">
+						<TableHeader className="bg-card sticky top-0 z-10 block w-full shadow-sm shrink-0">
 							<TableRow className="flex w-full">
-								<TableHead className="pl-4 flex-1 flex items-center">
+								<TableHead className="pl-4 flex-2 flex items-center">
 									Group
 								</TableHead>
 								<TableHead className="flex-1 flex items-center">
@@ -245,93 +245,83 @@ export default function GroupManagement() {
 								<TableHead className="w-70 flex items-center" />
 							</TableRow>
 						</TableHeader>
+
 						<TableBody className="block w-full">
-							<ScrollArea className="h-[65vh]">
-								{loading ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={4}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											Loading...
+							{loading ? (
+								<TableRow className="flex w-full">
+									<TableCell className="flex-1 text-center p-8 text-muted-foreground">
+										Loading...
+									</TableCell>
+								</TableRow>
+							) : groups.length === 0 ? (
+								<TableRow className="flex w-full">
+									<TableCell className="flex-1 text-center p-8 text-muted-foreground">
+										No groups yet, create one to get started.
+									</TableCell>
+								</TableRow>
+							) : (
+								groups.map((group) => (
+									<TableRow key={group.id} className="flex w-full items-center">
+										<TableCell className="font-medium pl-4 flex-2 flex items-center gap-2 truncate">
+											<GroupBadge group={group} />
 										</TableCell>
-									</TableRow>
-								) : groups.length === 0 ? (
-									<TableRow className="flex w-full">
-										<TableCell
-											colSpan={4}
-											className="flex-1 text-center text-muted-foreground"
-										>
-											No groups yet, create one to get started.
+										<TableCell className="flex-1 flex items-center text-sm text-muted-foreground">
+											{group.memberCount}
 										</TableCell>
-									</TableRow>
-								) : (
-									groups.map((group) => (
-										<TableRow
-											key={group.id}
-											className="flex w-full items-center"
-										>
-											<TableCell className="font-medium pl-4 flex-1 flex items-center gap-2 truncate">
-												<GroupBadge group={group} />
-											</TableCell>
-											<TableCell className="flex-1 flex items-center text-sm text-muted-foreground">
-												{group.memberCount}
-											</TableCell>
-											<TableCell className="flex-1 flex items-center text-sm text-muted-foreground">
-												{countPermissions(group.permissions)} granted
-											</TableCell>
-											<TableCell className="w-70 flex justify-end gap-2 pr-4">
-												<Button
-													size="sm"
-													variant="outline"
-													className="h-7"
-													onClick={() => setDialog(group)}
-												>
-													<Pencil className="mr-1.5 h-3.5 w-3.5" /> Edit
-												</Button>
+										<TableCell className="flex-1 flex items-center text-sm text-muted-foreground">
+											{countPermissions(group.permissions)} granted
+										</TableCell>
+										<TableCell className="w-70 flex justify-end gap-2 pr-4">
+											<Button
+												size="sm"
+												variant="outline"
+												className="h-7"
+												onClick={() => setDialog(group)}
+											>
+												<Pencil className="mr-1.5 h-3.5 w-3.5" /> Edit
+											</Button>
 
-												<AlertDialog>
-													<AlertDialogTrigger asChild>
-														<Button
-															size="sm"
+											<AlertDialog>
+												<AlertDialogTrigger asChild>
+													<Button
+														size="sm"
+														variant="destructive"
+														className="h-7"
+														disabled={group.memberCount > 0}
+													>
+														<Trash2 className="h-3.5 w-3.5" />
+													</Button>
+												</AlertDialogTrigger>
+												<AlertDialogContent>
+													<AlertDialogHeader>
+														<AlertDialogTitle>
+															Delete "{group.name}"?
+														</AlertDialogTitle>
+														<AlertDialogDescription>
+															This action cannot be undone. Admins can no longer
+															be assigned to this group.
+														</AlertDialogDescription>
+													</AlertDialogHeader>
+													<AlertDialogFooter>
+														<AlertDialogCancel>Cancel</AlertDialogCancel>
+														<AlertDialogAction
+															onClick={() => handleDelete(group)}
 															variant="destructive"
-															className="h-7"
-															disabled={group.memberCount > 0}
 														>
-															<Trash2 className="h-3.5 w-3.5" />
-														</Button>
-													</AlertDialogTrigger>
-
-													<AlertDialogContent>
-														<AlertDialogHeader>
-															<AlertDialogTitle>
-																Delete "{group.name}"?
-															</AlertDialogTitle>
-															<AlertDialogDescription>
-																This action cannot be undone. Admins can no
-																longer be assigned to this group.
-															</AlertDialogDescription>
-														</AlertDialogHeader>
-
-														<AlertDialogFooter>
-															<AlertDialogCancel>Cancel</AlertDialogCancel>
-															<AlertDialogAction
-																onClick={() => handleDelete(group)}
-																variant="destructive"
-															>
-																Delete Group
-															</AlertDialogAction>
-														</AlertDialogFooter>
-													</AlertDialogContent>
-												</AlertDialog>
-											</TableCell>
-										</TableRow>
-									))
-								)}
-							</ScrollArea>
+															Delete Group
+														</AlertDialogAction>
+													</AlertDialogFooter>
+												</AlertDialogContent>
+											</AlertDialog>
+										</TableCell>
+									</TableRow>
+								))
+							)}
 						</TableBody>
 					</Table>
-				</div>
+
+					<ScrollBar orientation="horizontal" className="hidden" />
+				</ScrollArea>
 			</Card>
 
 			<GroupDialog
diff --git a/apps/webpanel/src/pages/settings/index.tsx b/apps/webpanel/src/pages/settings/index.tsx
index 1298287a..fb08585d 100644
--- a/apps/webpanel/src/pages/settings/index.tsx
+++ b/apps/webpanel/src/pages/settings/index.tsx
@@ -153,7 +153,7 @@ export default function SettingsPage() {
 	}, [currentTab, loadTab]);
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader
 				Icon={Settings}
 				title="Settings"
diff --git a/apps/webpanel/src/pages/whitelist/index.tsx b/apps/webpanel/src/pages/whitelist/index.tsx
index ca260d73..ab0929b5 100644
--- a/apps/webpanel/src/pages/whitelist/index.tsx
+++ b/apps/webpanel/src/pages/whitelist/index.tsx
@@ -16,7 +16,7 @@ import { Button } from '@fxmanager/ui/components/button';
 import { Input } from '@fxmanager/ui/components/input';
 import { Badge } from '@fxmanager/ui/components/badge';
 import { Card } from '@fxmanager/ui/components/card';
-import { ScrollArea } from '@fxmanager/ui/components/scroll-area';
+import { ScrollArea, ScrollBar } from '@fxmanager/ui/components/scroll-area';
 import {
 	Table,
 	TableHeader,
@@ -222,16 +222,16 @@ export default function WhitelistIndex() {
 	}, [fetchFromServer]);
 
 	return (
-		<div className="flex h-[calc(100vh-5rem)] flex-col gap-4">
+		<div className="flex h-full flex-col gap-4 p-4">
 			<PageHeader
 				Icon={ScanEye}
 				title="Whitelist Management"
 				description="Handle whitelist management."
 			/>
 
-			<div className="flex flex-row justify-between">
-				<div className="flex items-center gap-3">
-					<div className="relative flex-1 max-w-sm">
+			<div className="flex flex-wrap items-center justify-between gap-4 shrink-0">
+				<div className="flex flex-wrap items-center gap-3">
+					<div className="relative flex-1 min-w-[200px] max-w-sm">
 						<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
 						<Input
 							placeholder="Search by name, identifier..."
@@ -242,7 +242,7 @@ export default function WhitelistIndex() {
 					</div>
 
 					<Select value={sortBy} onValueChange={(v) => setSortBy(v as SortBy)}>
-						<SelectTrigger className="lg:w-40">
+						<SelectTrigger className="w-32 lg:w-40">
 							<SelectValue placeholder="Sort by" />
 						</SelectTrigger>
 						<SelectContent>
@@ -254,7 +254,7 @@ export default function WhitelistIndex() {
 					<Button
 						variant="outline"
 						onClick={toggleSortOrder}
-						className="lg:w-40 justify-between"
+						className="w-12 lg:w-40 justify-center lg:justify-between px-0 lg:px-4"
 					>
 						<span className="hidden lg:block">
 							{sortOrder === 'asc' ? 'Ascending' : 'Descending'}
@@ -316,121 +316,115 @@ export default function WhitelistIndex() {
 				</Dialog>
 			</div>
 
-			{/* ToDo:
-        find a solution for mobile display as this fucks up, options:
-        * Dynamically display columns on mobile (only show active filter)
-        * Don't show extra columns
-      */}
-
-			<Card className="bg-card/50 py-0">
-				<div className="overflow-hidden rounded-t-lg">
-					<Table className="table-fixed w-full">
-						<TableHeader className="bg-card block w-full">
+			<Card className="bg-card/50 py-0 flex-1 flex flex-col min-h-0">
+				<ScrollArea className="rounded-t-lg flex-1 w-full max-w-full">
+					<Table className="table-fixed w-full min-w-[700px]">
+						<TableHeader className="bg-card sticky top-0 z-10 block w-full shadow-sm shrink-0">
 							<TableRow className="flex w-full">
-								<TableHead className="flex-[1] flex items-center pl-4">
+								<TableHead className="flew-1 flex items-center pl-4">
 									Player
 								</TableHead>
-								<TableHead className="flex-[1] hidden md:flex items-center">
-									Type
-								</TableHead>
-								<TableHead className="flex-[1.5] hidden md:flex items-center">
+								<TableHead className="flew-1 flex items-center">Type</TableHead>
+								<TableHead className="flex-[1.5] flex items-center">
 									Identifier
 								</TableHead>
-								<TableHead className="flex-[1] hidden lg:flex items-center">
+								<TableHead className="flew-1 flex items-center">
 									Added By
 								</TableHead>
 								<TableHead className="flex-[0.25] flex items-center justify-end pr-4">
 									Actions
-								</TableHead>{' '}
+								</TableHead>
 							</TableRow>
 						</TableHeader>
+
 						<TableBody className="block w-full">
-							<ScrollArea className="h-[65vh]">
-								{loading ? (
-									<div className="p-8 text-center text-muted-foreground">
+							{loading ? (
+								<TableRow className="flex w-full">
+									<TableCell className="flex-1 p-8 text-center text-muted-foreground">
 										Loading whitelist...
-									</div>
-								) : entries.length === 0 ? (
-									<div className="p-8 text-center text-muted-foreground">
+									</TableCell>
+								</TableRow>
+							) : entries.length === 0 ? (
+								<TableRow className="flex w-full">
+									<TableCell className="flex-1 p-8 text-center text-muted-foreground">
 										No entries found.
-									</div>
-								) : (
-									entries.map((entry) => (
-										<TableRow
-											key={entry.id}
-											className="flex w-full items-center py-2"
-										>
-											<TableCell className="flex-[1] flex items-center pl-4 min-w-0">
-												<div className="flex flex-col">
-													<span className="font-medium truncate">
-														{entry.playerName ?? 'Unlinked Player'}
-													</span>
-												</div>
-											</TableCell>
-
-											<TableCell className="flex-[1] hidden md:flex items-start justify-start">
-												<Badge
-													variant="outline"
-													className="text-[10px] font-bold uppercase tracking-wider"
-												>
-													{entry.type}
-												</Badge>
-											</TableCell>
-
-											<TableCell className="flex-[1.5] hidden md:flex items-center font-mono text-zinc-500">
-												<button
-													type="button"
-													title="Click to copy identifier"
-													onClick={() => copyToClipboard(entry.value)}
-												>
-													{formatIdentifier(entry.value)}
-												</button>
-											</TableCell>
-
-											<TableCell className="flex-[1] hidden lg:flex items-center gap-2">
-												{entry.addedByAdmin === 'system' ? (
-													<>
-														<Server className="h-4 w-4 text-primary" />
-														<span className="truncate">System</span>
-													</>
-												) : entry.addedByAdmin === 'deleted_admin' ? (
-													<>
-														<UserX2 className="h-4 w-4 text-red-500" />
-														<span className="truncate">Deleted Admin</span>
-													</>
+									</TableCell>
+								</TableRow>
+							) : (
+								entries.map((entry) => (
+									<TableRow
+										key={entry.id}
+										className="flex w-full items-center py-2"
+									>
+										<TableCell className="flew-1 flex items-center pl-4 min-w-0">
+											<div className="flex flex-col">
+												<span className="font-medium truncate">
+													{entry.playerName ?? 'Unlinked Player'}
+												</span>
+											</div>
+										</TableCell>
+
+										<TableCell className="flew-1 flex items-start justify-start">
+											<Badge
+												variant="outline"
+												className="text-[10px] font-bold uppercase tracking-wider"
+											>
+												{entry.type}
+											</Badge>
+										</TableCell>
+
+										<TableCell className="flex-[1.5] flex items-center font-mono text-zinc-500">
+											<button
+												type="button"
+												title="Click to copy identifier"
+												onClick={() => copyToClipboard(entry.value)}
+											>
+												{formatIdentifier(entry.value)}
+											</button>
+										</TableCell>
+
+										<TableCell className="flew-1 flex items-center gap-2">
+											{entry.addedByAdmin === 'system' ? (
+												<>
+													<Server className="h-4 w-4 text-primary shrink-0" />
+													<span className="truncate">System</span>
+												</>
+											) : entry.addedByAdmin === 'deleted_admin' ? (
+												<>
+													<UserX2 className="h-4 w-4 text-red-500 shrink-0" />
+													<span className="truncate">Deleted Admin</span>
+												</>
+											) : (
+												<>
+													<ShieldCheck className="h-4 w-4 text-blue-500 shrink-0" />
+													<span className="truncate">{entry.addedByAdmin}</span>
+												</>
+											)}
+										</TableCell>
+
+										<TableCell className="flex-[0.25] flex items-center justify-end pr-4">
+											<Button
+												variant="ghost"
+												size="icon"
+												className="h-8 w-8 hover:text-red-500 hover:bg-red-500/10"
+												onClick={() => handleDelete(entry.id)}
+											>
+												{isDeleting === entry.id ? (
+													<Loader2 className="text-orange-500 animate-spin" />
 												) : (
-													<>
-														<ShieldCheck className="h-4 w-4 text-blue-500" />
-														<span className="truncate">
-															{entry.addedByAdmin}
-														</span>
-													</>
+													<Trash2 className="h-4 w-4" />
 												)}
-											</TableCell>
-
-											<TableCell className="flex-[0.25] flex items-center justify-end pr-4">
-												<Button
-													variant="ghost"
-													size="icon"
-													className="h-8 w-8 hover:text-red-500 hover:bg-red-500/10"
-													onClick={() => handleDelete(entry.id)}
-												>
-													{isDeleting === entry.id ? (
-														<Loader2 className="text-orange-500 animate-spin" />
-													) : (
-														<Trash2 className="h-4 w-4" />
-													)}
-												</Button>
-											</TableCell>
-										</TableRow>
-									))
-								)}
-							</ScrollArea>
+											</Button>
+										</TableCell>
+									</TableRow>
+								))
+							)}
 						</TableBody>
 					</Table>
-				</div>
+					<ScrollBar orientation="horizontal" className="hidden" />
+				</ScrollArea>
 
-				<div className="flex items-center justify-between px-4 py-4 border-t border-border bg-card">
+				<div className="flex flex-wrap items-center justify-between gap-4 px-4 py-4 border-t border-border bg-card shrink-0">
 					<PageSizeSelector
 						pageSize={pageSize}
 						setPageSize={setPageSize}

From 11502f2b55d41436644bbc2a0a562286e4c1c4e0 Mon Sep 17 00:00:00 2001
From: Maximus7474 <the.maximus.7474@gmail.com>
Date: Sun, 5 Jul 2026 22:24:14 +0200
Subject: [PATCH 2/2] tweak(webpanel/pages): increased default page size to 20

---
 apps/webpanel/src/pages/players/index.tsx            | 2 +-
 apps/webpanel/src/pages/settings/adminmanagement.tsx | 2 +-
 apps/webpanel/src/pages/whitelist/index.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/webpanel/src/pages/players/index.tsx b/apps/webpanel/src/pages/players/index.tsx
index 6f5296ed..056345fd 100644
--- a/apps/webpanel/src/pages/players/index.tsx
+++ b/apps/webpanel/src/pages/players/index.tsx
@@ -47,7 +47,7 @@ export default function Players() {
 	const sortBy = (searchParams.get('sortBy') as SortBy) ?? 'lastSeen';
 	const sortOrder = (searchParams.get('sortOrder') as SortOrder) ?? 'desc';
 	const page = Number(searchParams.get('page') ?? 1);
-	const pageSize = Number(searchParams.get('pageSize') ?? 5);
+	const pageSize = Number(searchParams.get('pageSize') ?? 20);
 
 	const debouncedSearch = useDebounce(search, 300);
 	const loading = players === null;
diff --git a/apps/webpanel/src/pages/settings/adminmanagement.tsx b/apps/webpanel/src/pages/settings/adminmanagement.tsx
index da1d678e..bcbee4f7 100644
--- a/apps/webpanel/src/pages/settings/adminmanagement.tsx
+++ b/apps/webpanel/src/pages/settings/adminmanagement.tsx
@@ -43,7 +43,7 @@ export default function AdminManagementList() {
 	const sortBy = (searchParams.get('sortBy') as SortBy) ?? 'lastLoginAt';
 	const sortOrder = (searchParams.get('sortOrder') as SortOrder) ?? 'desc';
 	const page = Number(searchParams.get('page') ?? 1);
-	const pageSize = Number(searchParams.get('pageSize') ?? 5);
+	const pageSize = Number(searchParams.get('pageSize') ?? 20);
 
 	const debouncedSearch = useDebounce(search, 300);
 	const loading = admins === null;
diff --git a/apps/webpanel/src/pages/whitelist/index.tsx b/apps/webpanel/src/pages/whitelist/index.tsx
index ab0929b5..3b3d390f 100644
--- a/apps/webpanel/src/pages/whitelist/index.tsx
+++ b/apps/webpanel/src/pages/whitelist/index.tsx
@@ -78,7 +78,7 @@ export default function WhitelistIndex() {
 	const sortBy = (searchParams.get('sortBy') as SortBy) ?? 'addedAt';
 	const sortOrder = (searchParams.get('sortOrder') as SortOrder) ?? 'desc';
 	const page = Number(searchParams.get('page') ?? 1);
-	const pageSize = Number(searchParams.get('pageSize') ?? 5);
+	const pageSize = Number(searchParams.get('pageSize') ?? 20);
 
 	const debouncedSearch = useDebounce(search, 300);
 	const loading = entries === null;