aligning badges

x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx

@@ -20,6 +20,7 @@ import {
   EuiTabbedContent,
   EuiTabbedContentTab,
   EuiTitle,
+  useEuiPaddingSize,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
@@ -35,22 +36,28 @@ interface ExpandedRowProps {
   item: ModelItemFull;
 }
 
-const badgeFormatter = (items: string[]) => {
-  if (items.length === 0) return;
-  return (
-    <div>
-      {items.map((item) => (
-        <EuiBadge key={item} color="hollow">
-          {item}
-        </EuiBadge>
-      ))}
-    </div>
-  );
+const useBadgeFormatter = () => {
+  const xs = useEuiPaddingSize('xs');
+
+  function badgeFormatter(items: string[]) {
+    if (items.length === 0) return;
+    return (
+      <div>
+        {items.map((item) => (
+          <span css={{ marginRight: xs! }} key={item}>
+            <EuiBadge color="hollow">{item}</EuiBadge>
+          </span>
+        ))}
+      </div>
+    );
+  }
+  return { badgeFormatter };
 };
 
 export function useListItemsFormatter() {
   const bytesFormatter = useFieldFormatter(FIELD_FORMAT_IDS.BYTES);
   const dateFormatter = useFieldFormatter(FIELD_FORMAT_IDS.DATE);
+  const { badgeFormatter } = useBadgeFormatter();
 
   const formatterDictionary: Record<string, (value: any) => JSX.Element | string | undefined> =
     useMemo(

x-pack/plugins/ml/public/application/trained_models/nodes_overview/expanded_row.tsx

@@ -119,7 +119,7 @@ export const ExpandedRow: FC<ExpandedRowProps> = ({ item }) => {
                   <h5>
                     <FormattedMessage
                       id="xpack.ml.trainedModels.nodesList.expandedRow.allocatedModelsTitle"
-                      defaultMessage="Allocated models"
+                      defaultMessage="Allocated trained models"
                     />
                   </h5>
                 </EuiTitle>