Show cluster name instead of cluster id

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

lib/shared/addon/components/form-cluster-select/component.js

@@ -5,26 +5,28 @@ import { next } from '@ember/runloop';
 
 export default Component.extend({
   layout,
-  tagName:            'div',
-  classNames:         ['box'],
+  tagName: 'div',
+  classNames: ['box'],
   requestedClusterId: null,
-  requestedRoles:     null,
-  defaultExpand:      null,
-  hasCluster:         null,
-  setDisabled:        false,
+  requestedClusterName: null,
+  requestedRoles: null,
+  defaultExpand: null,
+  hasCluster: null,
+  setDisabled: false,
   didReceiveAttrs() {
     if (get(this, 'hasCluster')) {
       next(() => {
         setProperties(this, {
           setDisabled: true,
-          requestedClusterId: get(this, 'hasCluster.id')
+          requestedClusterId: get(this, 'hasCluster.id'),
+          requestedClusterName: get(this, 'hasCluster.name') || `(${get(this, 'hasCluster.id')})`,
         });
       })
     }
   },
   actions: {
     addRole(role) {
-      let roles = (get(this, 'requestedRoles')||[]).slice();
+      let roles = (get(this, 'requestedRoles') || []).slice();
 
       if (roles.includes(role)) {
         roles = roles.without(role);

lib/shared/addon/components/form-cluster-select/template.hbs

@@ -3,7 +3,7 @@
   <div class="col span-6">
     <label class="acc-label" for="">{{t 'hostsPage.new.addCluster.cluster.label'}}</label>
     {{#if hasCluster }}
-      <input name="" type="text" value="{{requestedClusterId}}" disabled=true />
+      <input name="" type="text" value="{{requestedClusterName}}" disabled=true />
     {{else}}
       {{searchable-select content=clusters value=requestedClusterId optionLabelPath="name" optionValuePath="id" localizedLabel=false}}
     {{/if}}

lib/shared/addon/components/node-condition-list/component.js

@@ -33,7 +33,7 @@ export default Component.extend({
       name: 'reason',
       sort: ['reason'],
       translationKey: 'conditionSections.table.reason',
-      width: 200,
+      width: 250,
     },
     {
       name: 'message',