From 752ee008ffc400ba7603c63999f3ec15fc3749f3 Mon Sep 17 00:00:00 2001
From: oOHiyoriOo <sidney.marvin.fricke@gmail.com>
Date: Sat, 13 Jun 2026 18:38:18 +0200
Subject: [PATCH] refactor: players donut beside network chart (1/4 + 3/4)

Moved Players card before Network, placed side by side in a row:
col-sm-3 for the donut, col-sm-9 for the networking area chart.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 js/pages/serverInfo.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/js/pages/serverInfo.js b/js/pages/serverInfo.js
index 9e76729..14c4672 100644
--- a/js/pages/serverInfo.js
+++ b/js/pages/serverInfo.js
@@ -22,6 +22,19 @@ function ServerInfoPage(params, container) {
               '<div class="card-body"><svg id="chart-performance" style="height:200px;width:100%"></svg></div>' +
             '</div>' +
           '</div>' +
+        '</div>' +
+        '<div class="col-sm-3">' +
+          '<div class="card mb-3">' +
+            '<div class="card-header">' +
+              '<button class="btn btn-sm btn-outline-primary float-end" role="button" data-bs-toggle="collapse" data-bs-target="#playersCollapse">toggle</button>' +
+              '<h4 class="card-title mb-0">Players</h4>' +
+            '</div>' +
+            '<div id="playersCollapse" class="collapse show">' +
+              '<div class="card-body"><svg id="chart-players" style="height:200px;width:100%"></svg></div>' +
+            '</div>' +
+          '</div>' +
+        '</div>' +
+        '<div class="col-sm-9">' +
           '<div class="card mb-3">' +
             '<div class="card-header">' +
               '<button class="btn btn-sm btn-outline-primary float-end" role="button" data-bs-toggle="collapse" data-bs-target="#networkCollapse">toggle</button>' +
@@ -31,15 +44,6 @@ function ServerInfoPage(params, container) {
               '<div class="card-body"><svg id="chart-network" style="height:250px;width:100%"></svg></div>' +
             '</div>' +
           '</div>' +
-          '<div class="card mb-3">' +
-            '<div class="card-header">' +
-              '<button class="btn btn-sm btn-outline-primary float-end" role="button" data-bs-toggle="collapse" data-bs-target="#playersCollapse">toggle</button>' +
-              '<h4 class="card-title mb-0">Players</h4>' +
-            '</div>' +
-            '<div id="playersCollapse" class="collapse show">' +
-              '<div class="card-body"><svg id="chart-players" style="height:250px;width:100%"></svg></div>' +
-            '</div>' +
-          '</div>' +
         '</div>' +
       '</div>' +
     '</div>';