UI: Fix namespace picker in small screens (#27728)

* add renderInPlace to namespace picker dropdown, fix styling

* Add changelog

changelog/27728.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: fix namespace picker not working when in small screen where the sidebar is collapsed by default.
+```

ui/app/styles/components/namespace-picker.scss

@@ -6,7 +6,6 @@
 .namespace-picker {
   position: relative;
   color: var(--token-color-palette-neutral-300);
-  display: flex;
   padding: $spacing-4 $spacing-8;
   width: 100%;
 }
@@ -23,12 +22,14 @@
   height: 2rem;
   justify-content: space-between;
   margin-right: $spacing-4;
+  width: 100%;
 }
 
 .namespace-picker-content {
   width: 250px;
   max-height: 300px;
   overflow: auto;
+  color: var(--token-color-foreground-primary);
   border-radius: $radius;
   box-shadow: $box-shadow, $box-shadow-high;
 

ui/app/templates/components/namespace-picker.hbs

@@ -4,7 +4,7 @@
 ~}}
 
 <div class="namespace-picker" ...attributes>
-  <BasicDropdown @horizontalPosition="left" @verticalPosition="above" as |D|>
+  <BasicDropdown @horizontalPosition="left" @verticalPosition="above" @renderInPlace={{true}} as |D|>
     <D.Trigger
       @htmlTag="button"
       class="button is-transparent namespace-picker-trigger has-current-color"