diff --git a/changelog/_22733.txt b/changelog/_22733.txt
new file mode 100644
index 0000000000..039e423596
--- /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 9b75912f3f..f6ea023003 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 43b76fdb99..ef64f591eb 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 3c348612e4..9245cabf70 100644
--- a/ui/app/templates/components/namespace-picker.hbs
+++ b/ui/app/templates/components/namespace-picker.hbs
@@ -10,9 +10,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>