From ce6f59b5439723d018951d975b42adfda0525614 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sun, 19 Jul 2026 18:48:52 +0200
Subject: [PATCH] Improve chat-box scrollbar styling with thin bars,
 transparency, and hover effects for better UI consistency.

---
 .../components/chat/chat-box.component.scss   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
index 2ca9f05..8a101a1 100644
--- a/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
+++ b/frontend/src/app/pages/altitude/chat/components/chat/chat-box.component.scss
@@ -9,6 +9,25 @@
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
+}
+
+.message-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.message-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.message-container::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.35);
+  border-radius: 999px;
+}
+
+.message-container::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
 .message {