[SecuritySolution] Numbers of Network KPI metric are cropped (elastic…

…#211460)

## Summary

Fix issue elastic#210806


### Network Page
| Before | After |
|--------|-------|
| ![Network
Before](https://github.com/user-attachments/assets/0b3277f7-dbe2-41a4-ac76-05a806bb42e8)
| ![Network
After](https://github.com/user-attachments/assets/12b16e81-d13b-495f-9d46-a4154aa8e0cf)
|

### Host Page
| Before | After |
|--------|-------|
| ![Host
Before](https://github.com/user-attachments/assets/1338b0e5-f4b1-4d1a-ad54-da392f0eff07)
| ![Host
After](https://github.com/user-attachments/assets/48af01d9-a4aa-450d-ac81-e2b4a724363f)
|

### Users Page
| Before | After |
|--------|-------|
| ![Users
Before](https://github.com/user-attachments/assets/d7acdf4d-9a4f-4b67-923c-a184e13b367f)
| ![Users
After](https://github.com/user-attachments/assets/43bf36bd-1e3b-47d7-b121-0d4142b18cbe)
|


### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: Karen Grigoryan <[email protected]>

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_dns_queries.ts

@@ -17,7 +17,7 @@ export const kpiDnsQueriesLensAttributes: LensAttributes = {
       accessor: '0374e520-eae0-4ac1-bcfe-37565e7fc9e3',
       layerType: 'data',
       colorMode: 'None',
-      autoScaleMetricAlignment: 'left',
+      autoScaleMetricAlignment: 'center',
     },
     query: {
       query: '',

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_network_events.ts

@@ -16,7 +16,7 @@ export const kpiNetworkEventsLensAttributes: LensAttributes = {
       layerId: 'eaadfec7-deaa-4aeb-a403-3b4e516416d2',
       accessor: '370ebd07-5ce0-4f46-a847-0e363c50d037',
       layerType: 'data',
-      autoScaleMetricAlignment: 'left',
+      autoScaleMetricAlignment: 'center',
     },
     query: {
       query: '',

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_tls_handshakes.ts

@@ -15,7 +15,7 @@ export const kpiTlsHandshakesLensAttributes: LensAttributes = {
       layerId: '1f48a633-8eee-45ae-9471-861227e9ca03',
       accessor: '21052b6b-5504-4084-a2e2-c17f772345cf',
       layerType: 'data',
-      autoScaleMetricAlignment: 'left',
+      autoScaleMetricAlignment: 'center',
     },
     query: {
       query:

x-pack/solutions/security/plugins/security_solution/public/common/components/visualization_actions/lens_attributes/network/kpi_unique_flow_ids.ts

@@ -16,7 +16,7 @@ export const kpiUniqueFlowIdsLensAttributes: LensAttributes = {
       layerId: '5d46d48f-6ce8-46be-a797-17ad50642564',
       accessor: 'a27f3503-9c73-4fc1-86bb-12461dae4b70',
       layerType: 'data',
-      autoScaleMetricAlignment: 'left',
+      autoScaleMetricAlignment: 'center',
     },
     query: {
       query: 'source.ip: * or destination.ip: * ',

x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/metric_embeddable.tsx

@@ -4,9 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiFlexGroup, EuiIcon } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import React from 'react';
-import { FlexItem, MetricItem, StatValue } from './utils';
+import { FlexItem, StatValue } from './utils';
 import { VisualizationEmbeddable } from '../../../common/components/visualization_actions/visualization_embeddable';
 import type { FieldConfigs } from './types';
 
@@ -41,7 +41,7 @@ const MetricEmbeddableComponent = ({
               </FlexItem>
             )}
 
-            <MetricItem>
+            <EuiFlexItem>
               {field.lensAttributes && (
                 <div data-test-subj="stat-title">
                   <VisualizationEmbeddable
@@ -54,7 +54,7 @@ const MetricEmbeddableComponent = ({
                   />
                 </div>
               )}
-            </MetricItem>
+            </EuiFlexItem>
             {field.description != null && (
               <FlexItem>
                 <StatValue>

x-pack/solutions/security/plugins/security_solution/public/explore/components/stat_items/utils.tsx

@@ -24,15 +24,6 @@ export const FlexItem = styled(EuiFlexItem)`
 
 FlexItem.displayName = 'FlexItem';
 
-export const MetricItem = styled(EuiFlexItem)`
-  &.euiFlexItem {
-    flex-basis: 0;
-    flex-grow: 0;
-    min-width: 100px;
-  }
-`;
-MetricItem.displayName = 'MetricItem';
-
 export const StatValue = styled(EuiTitle)`
   overflow: hidden;
   text-overflow: ellipsis;