frontend/src/app/pages/altitude/chat/chat.component.scss

@@ -27,7 +27,6 @@
       min-width: 0;
       padding: 0 5px 0 5px;
       min-height: 0;
-      box-sizing: border-box;
     }
   }
 }

frontend/src/app/pages/altitude/chat/components/chat-info/chat-info.component.scss

@@ -1,16 +1,6 @@
-.full-width {
-  display: flex;
-  align-items: center;
-  padding-top: 15px;
-  padding-bottom: 15px;
-  border-radius: 8px;
-  margin-bottom: 10px;
-}
-
 .server {
-  font-size: 20px;
-  font-family: minecraft-text, 'opensans-bold', sans-serif;
-  letter-spacing: 1px;
-  font-weight: bold;
   padding-left: 10px;
+  font-size: 25px;
+  font-family: minecraft-text, 'opensans-bold', sans-serif;
+  letter-spacing: 2px;
 }

frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.html

@@ -1,10 +1,8 @@
-<div class="message-container">
-  @for (message of messages(); track message.timestamp) {
-    <p class="message">
-      <span class="date-time" [class.blocked]="!message.notBlocked">
-        [{{ message.timestamp * 1000 | date: 'mediumTime' }}]
-      </span>
-      <mini-message [node]="message.messageJson"></mini-message>
-    </p>
-  }
-</div>
+@for (message of messages(); track message.timestamp) {
+  <p>
+    <span class="date-time" [class.blocked]="!message.notBlocked">
+      [{{ message.timestamp * 1000 | date: 'mediumTime' }}]
+    </span>
+    <mini-message [node]="message.messageJson"></mini-message>
+  </p>
+}

frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss

@@ -1,20 +1,3 @@
-:host {
-  display: block;
-  height: 100%;
-}
-
-.message-container {
-  display: flex;
-  flex-direction: column-reverse;
-  height: 100%;
-  overflow-y: auto;
-  box-sizing: border-box;
-}
-
-.message {
-  margin: 5px 0;
-}
-
 .blocked {
   color: red;
 }

frontend/src/app/pages/altitude/chat/components/server-list/server-list.component.scss

@@ -5,25 +5,19 @@
   .server {
     position: relative;
     display: flex;
-    align-items: center;
-    padding: 10px 20px;
+    padding: 2px 2px 2px 10px;
     border-bottom: 1px solid #222;
-    cursor: pointer;
-    transition: background-color 0.2s;
-
-    &:hover {
-      background-color: #202c42;
-    }
 
     .server-name {
-      color: white;
-      font-weight: bold;
+      color: white
     }
 
     .notification {
       position: absolute;
-      right: 15px;
-      color: #3b82f6;
+      right: 10px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: blue;
     }
   }
 }

frontend/src/app/pages/altitude/chat/service/chat.service.ts

@@ -20,7 +20,7 @@ export class ChatService implements OnDestroy {
   private eventSource?: EventSourcePolyfill;
   private readonly authService: AuthService = inject(AuthService)
   private readonly _messages = signal<ChatMessage[]>([])
-  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()).sort((a, b) => a.timestamp - b.timestamp));
+  public readonly messages = computed(() => this._messages().filter((message) => message.server === this._selectedServer()));
   private readonly _servers = signal<ChatServer[]>([])
   public readonly servers = computed(() => this._servers().sort((a, b) => a.server.localeCompare(b.server)));
   private readonly _selectedServer = signal<string>('');
@@ -53,7 +53,7 @@ export class ChatService implements OnDestroy {
     this.on(source, 'chat', (event) => {
       const chatMessages = this.processChatMessages(event);
       chatMessages.forEach((message) => {
-        const find = this.servers().find(server => message.server === server.server && message.server !== this._selectedServer());
+        const find = this.servers().find(server => message.server === server.server);
         if (find) {
           find.unreadMessages++;
         }