Fixed an issue where the join button would separate from the player count

This caused alignment problems and didn't look great. Now they're in a non-breaking container.

1 files changed, 7 insertions, 4 deletions

diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
index be66573..2c501fd 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
@@ -15,12 +15,14 @@ export default class ServerListing {
 
       let serverDiv = document.createElement('div');
       let nameSpan = document.createElement('span');
+      let rightAlignDiv = document.createElement('div');
       let onlineDot = document.createElement('div');
       let playerCountSpan = document.createElement('span');
       let playerCountStaticSpan = document.createElement('span');
       let joinButton = document.createElement('button');
       serverDiv.className = 'server';
       nameSpan.className = 'server-name';
+      rightAlignDiv.className = 'right-aligned-items';
       onlineDot.className = 'player-count-dot';
       playerCountSpan.className = 'player-count';
       playerCountStaticSpan.className = 'player-count-static';
@@ -31,11 +33,12 @@ export default class ServerListing {
       playerCountStaticSpan.textContent = 'Spieler online';
       joinButton.textContent = 'Beitreten';
 
+      rightAlignDiv.appendChild(onlineDot);
+      rightAlignDiv.appendChild(playerCountSpan);
+      rightAlignDiv.appendChild(playerCountStaticSpan);
+      rightAlignDiv.appendChild(joinButton);
       serverDiv.appendChild(nameSpan);
-      serverDiv.appendChild(onlineDot);
-      serverDiv.appendChild(playerCountSpan);
-      serverDiv.appendChild(playerCountStaticSpan);
-      serverDiv.appendChild(joinButton);
+      serverDiv.appendChild(rightAlignDiv)
       this.serverListing.appendChild(serverDiv);
     }
   }