Fix searchable select style issue

https://github.com/rancher/rancher/issues/11258

app/styles/components/_searchable-select.scss

@@ -43,7 +43,6 @@
   }
 
   .searchable-options {
-    max-height: 285px;
     overflow-y: scroll;
     background: $input-bg;
     position: absolute;

lib/shared/addon/components/searchable-select/component.js

@@ -25,7 +25,9 @@ import { next } from '@ember/runloop';
 import { get, set, computed, observer } from '@ember/object';
 import C from 'ui/utils/constants';
 import layout from './template';
+import { htmlSafe } from '@ember/string';
 import { on } from '@ember/object/evented';
+const MAX_HEIGHT = 285;
 
 export default Component.extend({
   layout,
@@ -56,6 +58,7 @@ export default Component.extend({
   filter: null,
   // the current highlighted option.
   $activeTarget: null,
+  maxHeight: MAX_HEIGHT,
 
   actions: {
     selectUnGroupedItem(idx) {
@@ -84,6 +87,8 @@ export default Component.extend({
       if (this.get('showOptions') === true) {
         return;
       }
+      const toBottom = $('body').height() - $(this.$()[0]).offset().top - 60;
+      this.set('maxHeight', toBottom < MAX_HEIGHT ? toBottom : MAX_HEIGHT)
       this.set('filter', null);
       // select text inside input search box, which will let users easey to clear the inputed text.
       // this.$('.input-search').select();
@@ -121,6 +126,10 @@ export default Component.extend({
     this.off();
   },
 
+  optionsMaxHeightCss: computed('maxHeight', function() {
+    return htmlSafe('max-height: ' + this.get('maxHeight') + 'px');
+  }),
+
   // Show option image --> unGroupedContent only
   showOptionIcon: computed('unGroupedContent.@each.imgUrl', function () {
     return this.get('unGroupedContent').some(item => !!item.imgUrl);

lib/shared/addon/components/searchable-select/template.hbs

@@ -2,7 +2,7 @@
   {{input disabled=readOnly class=(concat 'form-control input-search search ' class) placeholder=placeholder type="text" autocomplete="off" value=filter}}
 
   {{#if showOptions}}
-    <section class="searchable-options">
+    <section class="searchable-options" style={{optionsMaxHeightCss}}>
       {{#if prompt}}
         <div
           class="searchable-option searchable-prompt"