From 37f081959c8ea1aad7bd23481a34d8ca5815bb13 Mon Sep 17 00:00:00 2001
From: flaburgan <flaburgan@geexxx.fr>
Date: Thu, 28 Oct 2021 23:41:08 +0200
Subject: [PATCH] Add a max-width to user name in the header, fixes #7676

closes #8313
---
 Changelog.md                            |  1 +
 app/assets/stylesheets/header.scss      | 13 +++++++++++++
 app/assets/templates/header_tpl.jst.hbs |  2 +-
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/Changelog.md b/Changelog.md
index 96466dfb0..0c7f45d8c 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -9,6 +9,7 @@
 
 ## Bug fixes
 * Ensure the log folder exists [#8287](https://github.com/diaspora/diaspora/pull/8287)
+* Limit name length in header [#8313] (https://github.com/diaspora/diaspora/pull/8313)
 
 ## Features
 * Add tags to tumblr posts [#8244](https://github.com/diaspora/diaspora/pull/8244)
diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss
index 55fe8f924..c3285f99f 100644
--- a/app/assets/stylesheets/header.scss
+++ b/app/assets/stylesheets/header.scss
@@ -119,6 +119,19 @@
     }
   }
 
+  .dropdown-toggle {
+    align-items: center;
+    display: flex;
+
+    .user-name {
+      margin-right: 3px;
+      max-width: 250px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   .user-menu-dropdown {
     padding: 0;
   }
diff --git a/app/assets/templates/header_tpl.jst.hbs b/app/assets/templates/header_tpl.jst.hbs
index d730a8bd5..567f3aa85 100644
--- a/app/assets/templates/header_tpl.jst.hbs
+++ b/app/assets/templates/header_tpl.jst.hbs
@@ -69,7 +69,7 @@
           <ul class="nav navbar-nav navbar-right">
             <li class="dropdown user-menu" id="user-menu">
               <a href="{{urlTo "person" current_user.guid}}" class="dropdown-toggle hidden-xs hidden-sm" data-toggle="dropdown" role="button" aria-expanded="false">
-                <span class="user-avatar pull-left">
+                <span class="user-avatar">
                   {{{personImage current_user "small"}}}
                 </span>
                 <span class="user-name">{{current_user.name}}</span>