From fc918919ebb9195b3fe04ae8c19b9dcbd2548ae5 Mon Sep 17 00:00:00 2001
From: hc-github-team-secure-vault-core
 <82990506+hc-github-team-secure-vault-core@users.noreply.github.com>
Date: Tue, 5 Sep 2023 13:01:38 -0400
Subject: [PATCH] backport of commit fcd6f01761c6ca0c481b29591df26e0e59fd1f95
 (#22759)

Co-authored-by: Cinthia Conti <cinthiaconti@gmail.com>
---
 changelog/_22733.txt                             | 3 +++
 ui/app/styles/components/namespace-picker.scss   | 6 ------
 ui/app/styles/helper-classes/typography.scss     | 4 ++++
 ui/app/templates/components/namespace-picker.hbs | 4 ++--
 4 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 changelog/_22733.txt

diff --git a/changelog/_22733.txt b/changelog/_22733.txt
new file mode 100644
index 000000000..039e42359
--- /dev/null
+++ b/changelog/_22733.txt
@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes long namespace names overflow in the sidebar
+```
diff --git a/ui/app/styles/components/namespace-picker.scss b/ui/app/styles/components/namespace-picker.scss
index 367f4c984..26d30abf6 100644
--- a/ui/app/styles/components/namespace-picker.scss
+++ b/ui/app/styles/components/namespace-picker.scss
@@ -25,11 +25,6 @@
   margin-right: $spacing-xxs;
 }
 
-.namespace-name {
-  font-size: 1rem;
-  margin-left: $spacing-xs;
-}
-
 .namespace-picker-content {
   width: 250px;
   max-height: 300px;
@@ -46,7 +41,6 @@
   max-width: 210px;
   overflow-wrap: break-word;
   word-wrap: break-word;
-  word-break: break-all;
   word-break: break-word;
 }
 
diff --git a/ui/app/styles/helper-classes/typography.scss b/ui/app/styles/helper-classes/typography.scss
index af862435a..2b1ce30c8 100644
--- a/ui/app/styles/helper-classes/typography.scss
+++ b/ui/app/styles/helper-classes/typography.scss
@@ -75,6 +75,10 @@
   text-align: right !important;
 }
 
+.has-text-left {
+  text-align: left;
+}
+
 .has-text-centered {
   text-align: center !important;
 }
diff --git a/ui/app/templates/components/namespace-picker.hbs b/ui/app/templates/components/namespace-picker.hbs
index 3bab05d42..d23f42df7 100644
--- a/ui/app/templates/components/namespace-picker.hbs
+++ b/ui/app/templates/components/namespace-picker.hbs
@@ -5,9 +5,9 @@
       class="button is-transparent namespace-picker-trigger has-current-color"
       data-test-namespace-toggle
     >
-      <div class="is-flex-center">
+      <div class="is-flex-center is-flex-1">
         <Icon @name="org" />
-        <span class="namespace-name">{{this.namespaceDisplay}}</span>
+        <span class="is-flex-1 is-word-break has-text-left is-size-6 has-left-margin-xs">{{this.namespaceDisplay}}</span>
       </div>
       <Icon @name="caret" />
     </D.Trigger>