diff --git a/apps/home/static/home/css/sidebar.css b/apps/home/static/home/css/sidebar.css
index 32f7025..8b3805e 100644
--- a/apps/home/static/home/css/sidebar.css
+++ b/apps/home/static/home/css/sidebar.css
@@ -214,6 +214,18 @@
     background-color: var(--bs-body-bg);
 }
 
+.sidebar .sidebar-user-btn {
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sidebar .sidebar-pin-btn {
+    flex-grow: 0;
+}
+
 .sidebar .sidebar-avatar {
     border-radius: 50%;
     margin-right: 0.5rem;
diff --git a/apps/home/static/home/js/index.js b/apps/home/static/home/js/index.js
index 678f3e9..8fa85ed 100644
--- a/apps/home/static/home/js/index.js
+++ b/apps/home/static/home/js/index.js
@@ -296,13 +296,13 @@ $(window).on('resize', () => {
 
 // region Sidebar Pin
 
-var _sidebarPinned = $(".sidebar .pin-sidebar-btn").hasClass("active");
+var _sidebarPinned = $(".sidebar .sidebar-pin-btn").hasClass("active");
 const getSidebarPinned = () => _sidebarPinned;
 const setSidebarPinned = pin => {
     _sidebarPinned = pin;
 
     // Show button as active or not
-    const btn = $(".sidebar .pin-sidebar-btn");
+    const btn = $(".sidebar .sidebar-pin-btn");
     pin ? btn.addClass("active") : btn.removeClass("active");
 
     $(".sidebar .btn-close").prop("disabled", pin);
@@ -311,4 +311,4 @@ const setSidebarPinned = pin => {
 const toggleSidebarPinned = () => setSidebarPinned(!getSidebarPinned());
 
 // User controls for pinning the sidebar
-$(".sidebar .pin-sidebar-btn").on("click", toggleSidebarPinned);
+$(".sidebar .sidebar-pin-btn").on("click", toggleSidebarPinned);
diff --git a/apps/home/templates/home/sidebar.html b/apps/home/templates/home/sidebar.html
index 94126cd..2c5e8a0 100644
--- a/apps/home/templates/home/sidebar.html
+++ b/apps/home/templates/home/sidebar.html
@@ -35,11 +35,11 @@
     </ul>
     <hr class="sidebar-divider">
     <div class="sidebar-footer dropdown">
-        <button type="button" class="sidebar-menu-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+        <button type="button" class="sidebar-menu-btn sidebar-user-btn dropdown-toggle flex-grow-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
             <img src="{{ request.user.avatar_url }}" alt="user icon" class="sidebar-avatar">
-            <strong>{{ request.user.global_name }}</strong>
+            <strong class="text-truncate">{{ request.user.global_name }}</strong>
         </button>
-        <button type="button" class="pin-sidebar-btn sidebar-menu-btn justify-content-center d-flex d-lg-none flex-grow-0 px-3">
+        <button type="button" class="sidebar-pin-btn sidebar-menu-btn justify-content-center d-flex d-lg-none px-3">
             <i class="bi bi-pin-angle"></i>
         </button>
         <ul class="sidebar-menu dropdown-menu">