From e4dcf93238f9298e515279baafa937324dd5b45a Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Wed, 30 Dec 2020 21:34:27 +0100
Subject: [PATCH] UX: text overflow user-{primary,secondary}-navigation
 (#11604)

---
 .../discourse/app/templates/mobile/components/mobile-nav.hbs | 2 +-
 app/assets/stylesheets/mobile/discourse.scss                 | 5 ++++-
 app/assets/stylesheets/mobile/user.scss                      | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/mobile/components/mobile-nav.hbs b/app/assets/javascripts/discourse/app/templates/mobile/components/mobile-nav.hbs
index be9b156b454..d10e5bf1c55 100644
--- a/app/assets/javascripts/discourse/app/templates/mobile/components/mobile-nav.hbs
+++ b/app/assets/javascripts/discourse/app/templates/mobile/components/mobile-nav.hbs
@@ -1,7 +1,7 @@
 {{#if selectedHtml}}
   <li>
     <a href {{action "toggleExpanded"}} class="expander">
-      <span>{{html-safe selectedHtml}}</span>
+      <span class="selection">{{html-safe selectedHtml}}</span>
       {{d-icon "caret-down"}}
     </a>
   </li>
diff --git a/app/assets/stylesheets/mobile/discourse.scss b/app/assets/stylesheets/mobile/discourse.scss
index 396337988c3..63a05152d9f 100644
--- a/app/assets/stylesheets/mobile/discourse.scss
+++ b/app/assets/stylesheets/mobile/discourse.scss
@@ -91,10 +91,13 @@ blockquote {
     align-items: center;
     padding: 8px 10px;
     height: 100%;
-    width: 100%;
     box-sizing: border-box;
   }
 
+  .expander .selection {
+    @include ellipsis;
+  }
+
   .expander > .d-icon {
     &:last-of-type {
       margin-left: auto;
diff --git a/app/assets/stylesheets/mobile/user.scss b/app/assets/stylesheets/mobile/user.scss
index cf8aa99f005..693d0777f61 100644
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@@ -10,10 +10,12 @@
     grid-column-start: 1;
     grid-row-start: 1;
     grid-column-end: 2;
+    min-width: 120px;
   }
   .user-secondary-navigation {
     grid-column-start: 2;
     grid-row-start: 1;
+    min-width: 120px;
   }
   .user-additional-controls + .user-content,
   .user-secondary-navigation + .user-content {