UI: [VAULT-18126] adding style to prevent namespace to overflow on sidebar (#22733)

* adding style to prevent namespace to overflow

* adding helper css classes

* adding changelog entry

* removing namespace-name class in favour of helper classes

* style cleanup

* removing identation

changelog/_22733.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fixes long namespace names overflow in the sidebar
+```

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;
 }
 

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;
 }

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>