From 7241498f87cd5444d57bd8d29c5cffd9e40480ba Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Mon, 27 Dec 2021 14:44:02 +0100
Subject: [PATCH] fix(header): added text overflow

---
 .../navigation/left/ServerSidebar.tsx         | 35 ++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index e42b39b6..9c1dac79 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
 import { Redirect, useParams } from "react-router";
+import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components";
 
 import { attachContextMenu } from "preact-context-menu";
@@ -48,6 +49,32 @@ const ServerList = styled.div`
     }
 `;
 
+const ServerBanner = styled.div`
+    background-color: var(--primary-background);
+
+    .title {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        gap: 8px;
+
+        .test {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+`;
+
+interface Props {
+    server: Server;
+}
+
 export default observer(() => {
     const client = useClient();
     const state = useApplicationState();
@@ -137,7 +164,13 @@ export default observer(() => {
 
     return (
         <ServerBase>
-            <ServerHeader server={server} />
+            <ServerBanner>
+                <div className="title">
+                    <ServerHeader server={server} />
+                    <div className="test">{server.name}</div>
+                </div>
+            </ServerBanner>
+
             <ConnectionStatus />
             <ServerList
                 onContextMenu={attachContextMenu("Menu", {