From 824cb9160a10f3546511d72684fd2538a677a548 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 13:17:04 -0300
Subject: [PATCH 01/37] style(top_packages_table): increase padding size in
 EuiPanel for improved layout consistency and visual appearance

---
 .../components/top_packages_table/top_packages_table.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx b/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
index 7ae98623c7..b432cd1187 100644
--- a/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
+++ b/plugins/main/public/components/common/welcome/components/top_packages_table/top_packages_table.tsx
@@ -69,7 +69,7 @@ export function VulsTopPackageTable({ agentId, items, indexPatternId }) {
   ];
 
   return (
-    <EuiPanel paddingSize='s'>
+    <EuiPanel paddingSize='m'>
       <EuiFlexGroup>
         <EuiFlexItem>
           <EuiText size='xs'>

From 3767ab8ceebd09b57cb883ee2ce37b3fa0ec79ff Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 13:17:11 -0300
Subject: [PATCH 02/37] style(vuls_welcome_panel): align text to the left for
 better readability in vulnerability panel component

---
 .../common/welcome/components/vuls_panel/vuls_welcome_panel.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
index fcd13c4d8c..1e34b3a3c0 100644
--- a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
+++ b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
@@ -126,6 +126,7 @@ const VulsPanelContent = ({ agent }) => {
                   value={`${getSeverityValue(severityLabel)}`}
                   color={severityColor}
                   isLoading={isLoading || isDataSourceLoading}
+                  textAlign='left'
                 />
               </WzLink>
             </EuiFlexItem>

From a1453f3f2f3a3053535fd30df27f74db7027291c Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 13:56:39 -0300
Subject: [PATCH 03/37] refactor(agents-welcome): update malware detection to
 vulnerability detection for better alignment with application terminology

---
 .../main/public/components/common/welcome/agents-welcome.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/main/public/components/common/welcome/agents-welcome.js b/plugins/main/public/components/common/welcome/agents-welcome.js
index 61d41e9a2e..f031e5560f 100644
--- a/plugins/main/public/components/common/welcome/agents-welcome.js
+++ b/plugins/main/public/components/common/welcome/agents-welcome.js
@@ -51,7 +51,7 @@ import {
   endpointSummary,
   mitreAttack,
   threatHunting,
-  malwareDetection,
+  vulnerabilityDetection,
 } from '../../../utils/applications';
 import { RedirectAppLinks } from '../../../../../../src/plugins/opensearch_dashboards_react/public';
 import { EventsCount } from './dashboard/events-count';
@@ -183,7 +183,7 @@ export const AgentsWelcome = compose(
               fileIntegrityMonitoring.id,
               configurationAssessment.id,
               mitreAttack.id,
-              malwareDetection.id,
+              vulnerabilityDetection.id,
             ];
       }
 

From afc22bc96a6d27321a5cd1c9ed73a5d1b69e5776 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 14:55:56 -0300
Subject: [PATCH 04/37] feat(ribbon): add condensed prop to IRibbonItem and
 implement logic for displaying condensed items in the ribbon component

---
 .../components/common/ribbon/ribbon-item.tsx   |  1 +
 .../components/common/ribbon/ribbon.scss       | 18 ++++++++++++++++++
 .../public/components/common/ribbon/ribbon.tsx | 12 +++++++++++-
 .../common/welcome/agent-info/agent-info.tsx   | 11 +++++++++--
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 plugins/main/public/components/common/ribbon/ribbon.scss

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 29741c8a6b..d22306e5c3 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -24,6 +24,7 @@ export type IRibbonItem<LABEL extends string = string, VALUE = any> = {
   style?: React.CSSProperties;
   isLoading?: boolean;
   icon?: React.ReactNode;
+  condensed?: boolean;
 };
 
 const isGroups = (
diff --git a/plugins/main/public/components/common/ribbon/ribbon.scss b/plugins/main/public/components/common/ribbon/ribbon.scss
new file mode 100644
index 0000000000..179a5b4480
--- /dev/null
+++ b/plugins/main/public/components/common/ribbon/ribbon.scss
@@ -0,0 +1,18 @@
+.wz-ribbon-condensed > .wz-ribbon-item {
+  margin-block: 24px;
+
+  @media (max-width: 767px) {
+    margin-block: 12px;
+  }
+}
+
+.wz-ribbon-condensed {
+  margin-inline-start: 0;
+  margin-inline-end: 12px;
+  flex-grow: 0;
+
+  @media (max-width: 767px) {
+    margin-block: 0;
+    margin-inline-start: 0;
+  }
+}
diff --git a/plugins/main/public/components/common/ribbon/ribbon.tsx b/plugins/main/public/components/common/ribbon/ribbon.tsx
index 50def4a9a6..d08bceafcb 100644
--- a/plugins/main/public/components/common/ribbon/ribbon.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { EuiFlexGroup, EuiPanel } from '@elastic/eui';
 import WzRibbonItem, { type IRibbonItem } from './ribbon-item';
+import './ribbon.scss';
 
 interface RibbonProps {
   items: Array<IRibbonItem>;
@@ -9,6 +10,10 @@ interface RibbonProps {
 
 const WzRibbon = (props: RibbonProps) => {
   const { items, 'data-test-subj': dataTestSubj } = props;
+
+  const condensedItems = items.filter(item => item.condensed);
+  const nonCondensedItems = items.filter(item => !item.condensed);
+
   return (
     <EuiPanel paddingSize='m'>
       <EuiFlexGroup
@@ -17,7 +22,12 @@ const WzRibbon = (props: RibbonProps) => {
         justifyContent='spaceBetween'
         style={{ responsive: true }}
       >
-        {items.map(item => (
+        <EuiFlexGroup gutterSize='l' className='wz-ribbon-condensed'>
+          {condensedItems.map(item => (
+            <WzRibbonItem key={item.key} item={item} />
+          ))}
+        </EuiFlexGroup>
+        {nonCondensedItems.map(item => (
           <WzRibbonItem key={item.key} item={item} />
         ))}
       </EuiFlexGroup>
diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 984e7c5bcf..64f3cb63f9 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -47,18 +47,21 @@ export class AgentInfo extends Component<AgentInfoProps> {
           value: agent.id,
           label: 'ID',
           style: { maxWidth: 100 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.AGENT_STATUS,
           value: agent,
           label: 'Status',
           style: { maxWidth: 150 },
+          condensed: true,
         },
         {
           key: 'version',
           value: agent.version,
           label: 'Version',
           style: { maxWidth: 150 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.OPERATING_SYSTEM,
@@ -74,24 +77,28 @@ export class AgentInfo extends Component<AgentInfoProps> {
           value: agent.id,
           label: 'ID',
           style: { minWidth: 30 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.AGENT_STATUS,
           value: agent,
           label: 'Status',
           style: { minWidth: 100 },
+          condensed: true,
         },
         {
           key: 'ip',
           value: agent.ip,
           label: 'IP address',
-          style: {},
+          style: { minWidth: 80 },
+          condensed: true,
         },
         {
           key: 'version',
           value: agent.version,
           label: 'Version',
-          style: { minWidth: 100 },
+          style: { minWidth: 80 },
+          condensed: true,
         },
         {
           key: RibbonItemLabel.GROUPS,

From 2062c8bf21fe3523dd04dcfcfbf119587d74d8da Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 16:32:55 -0300
Subject: [PATCH 05/37] fix(dashboard_panels): adjust height of panel '1' from
 12 to 7 for improved layout consistency in dashboard panels

---
 .../components/common/welcome/dashboard/dashboard_panels.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts b/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
index 7d250e7d05..854fa3642b 100644
--- a/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
+++ b/plugins/main/public/components/common/welcome/dashboard/dashboard_panels.ts
@@ -122,7 +122,7 @@ export const getDashboardPanels = (
     '1': {
       gridData: {
         w: 48,
-        h: 12,
+        h: 7,
         x: 0,
         y: 0,
         i: '1',

From 553aa0ae6f78f21ec2136b5bcf2eb63d6e56f925 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Thu, 5 Dec 2024 16:47:40 -0300
Subject: [PATCH 06/37] chore(changelog): document changes to agent details
 page for better readability and layout consistency

---
 CHANGELOG.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c4568423c..3b9268870b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,15 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 - Support for Wazuh 4.10.1
 
+### Changed
+
+- Changed agent details page [#7193](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7193)
+  - Adjusted the height of the event count evolution visualization for better readability.
+  - Standardized padding for the "Top 5 Packages" table to align with other tables.
+  - Reduced the width of small fields in the Agent Info ribbon for a more compact layout.
+  - Replaced "Malware Detection" with "Vulnerability Detection" in the agent's pinned navigation menu.
+  - Aligned "Vulnerability Detection" KPIs to the left for consistency.
+
 ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 03
 
 ### Added

From 9e1ca2f6bd5162eba5573c1d7741a859d4d2d3a2 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Mon, 9 Dec 2024 12:18:03 -0300
Subject: [PATCH 07/37] fix(vuls_panel): change padding size of EuiPanel from
 's' to 'm' for improved layout consistency in the welcome panel

---
 .../common/welcome/components/vuls_panel/vuls_welcome_panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
index 1e34b3a3c0..ae59958a01 100644
--- a/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
+++ b/plugins/main/public/components/common/welcome/components/vuls_panel/vuls_welcome_panel.tsx
@@ -105,7 +105,7 @@ const VulsPanelContent = ({ agent }) => {
     const severityColor = severities[severity].color;
     return (
       <EuiFlexItem key={index}>
-        <EuiPanel paddingSize='s'>
+        <EuiPanel paddingSize='m'>
           <EuiFlexGroup className='h-100' gutterSize='none' alignItems='center'>
             <EuiFlexItem>
               <WzLink

From 0c1bbbb13aab3c1daf0ddb85085407a597c874f6 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Mon, 9 Dec 2024 12:36:25 -0300
Subject: [PATCH 08/37] fix(agent_info): update IP address style to set min and
 max width for improved layout consistency in agent info display

---
 .../public/components/common/welcome/agent-info/agent-info.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 64f3cb63f9..7417f51fc5 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -90,7 +90,7 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'ip',
           value: agent.ip,
           label: 'IP address',
-          style: { minWidth: 80 },
+          style: { minWidth: 100, maxWidth: 100 },
           condensed: true,
         },
         {

From 5e7bd6881088562e8fc889557f9021cc29c0042d Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Mon, 9 Dec 2024 13:32:30 -0300
Subject: [PATCH 09/37] Add euiFlexGroup element to inventory test snapshot

---
 .../__snapshots__/inventory.test.tsx.snap     | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
index 21933a7df0..b69d3ed569 100644
--- a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
+++ b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
@@ -16,6 +16,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -1467,6 +1470,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -2950,6 +2956,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -4425,6 +4434,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -5876,6 +5888,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -7359,6 +7374,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -8834,6 +8852,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -10285,6 +10306,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -11768,6 +11792,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -13243,6 +13270,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -13958,6 +13988,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -14820,6 +14853,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -15560,6 +15596,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -16252,6 +16291,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -16945,6 +16987,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
@@ -17922,6 +17967,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
         data-test-subj="syscollector-metrics"
         style="responsive:"
       >
+        <div
+          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
+        />
         <div
           class="euiFlexItem wz-ribbon-item"
           data-test-subj="ribbon-item-cores"

From fdebc14990e0b6ae04c05894d4230a1108720598 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Mon, 9 Dec 2024 14:41:05 -0300
Subject: [PATCH 10/37] fix(agent_details): refine layout of agent details view
 for improved readability and consistency [#7193]

---
 CHANGELOG.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b9268870b..6b57dc0de4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,12 +10,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 
 ### Changed
 
-- Changed agent details page [#7193](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7193)
-  - Adjusted the height of the event count evolution visualization for better readability.
-  - Standardized padding for the "Top 5 Packages" table to align with other tables.
-  - Reduced the width of small fields in the Agent Info ribbon for a more compact layout.
-  - Replaced "Malware Detection" with "Vulnerability Detection" in the agent's pinned navigation menu.
-  - Aligned "Vulnerability Detection" KPIs to the left for consistency.
+- Refined the layout of the agent details view [#7193](https://github.com/wazuh/wazuh-dashboard-plugins/issues/7193)
 
 ## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 03
 

From 41449fe6350adeafe532e41d2a87c731ef280867 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:06:00 -0300
Subject: [PATCH 11/37] feat(wz-text-tooltip): implement text truncation with
 tooltip for improved text display in component [#7194]

---
 .../wz-text-with-tooltip-if-truncated.scss    | 10 +++++
 .../wz-text-with-tooltip-if-truncated.tsx     | 39 +++++++++----------
 2 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
new file mode 100644
index 0000000000..4d148ae303
--- /dev/null
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
@@ -0,0 +1,10 @@
+.wz-text-content {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  @media (max-width: 767px) {
+    max-width: none !important;
+  }
+}
diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index bb6de7006b..518ce23fbf 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -12,39 +12,39 @@
  */
 
 import React, { Component } from 'react';
-
 import { EuiToolTip } from '@elastic/eui';
+import './wz-text-with-tooltip-if-truncated.scss';
 
 interface WzTextWithTooltipIfTruncatedProps extends React.PropsWithChildren {
   tooltip?: string;
   elementStyle?: React.CSSProperties;
   tooltipProps?: object;
-  position?: string; // same options as EuiTooltip's position
 }
 
 export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTooltipIfTruncatedProps> {
-  state: {
-    withTooltip: boolean;
-  };
   static defaultProps = {
     elementStyle: {},
   };
+  state: {
+    withTooltip: boolean;
+  };
   timer?: ReturnType<typeof setTimeout>;
-  reference: any;
+  contentReference: React.RefObject<HTMLElement>;
+
   constructor(props: WzTextWithTooltipIfTruncatedProps) {
     super(props);
-    this.reference = React.createRef<HTMLSpanElement>();
+    this.contentReference = React.createRef<HTMLElement>();
     this.state = {
       withTooltip: false,
     };
   }
+
   componentDidMount() {
     this.timer = setTimeout(() => {
-      //TODO: remove timer and setTimeout function. It is needed while this component is mounted through the AngularJS react-component directive.
       // HTML element reference with text (maybe truncated)
-      const reference = this.reference.current;
+      const reference = this.contentReference.current as HTMLElement;
       // HTML element clone of reference
-      const clone = reference.cloneNode(true);
+      const clone = reference.cloneNode(true) as HTMLElement;
       clone.style.display = 'inline';
       clone.style.width = 'auto';
       clone.style.visibility = 'hidden';
@@ -62,26 +62,25 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
       clone.remove();
     });
   }
+
   componentWillUnmount() {
-    this.timer && clearTimeout(this.timer);
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
+
   buildContent() {
     return (
       <span
-        ref={this.reference}
-        style={{
-          display: 'block',
-          overflow: 'hidden',
-          paddingBottom: '3px',
-          whiteSpace: 'nowrap',
-          textOverflow: 'ellipsis',
-          ...this.props.elementStyle,
-        }}
+        ref={this.contentReference}
+        className='wz-text-content'
+        style={this.props.elementStyle}
       >
         {this.props.children || this.props.tooltip}
       </span>
     );
   }
+
   render() {
     return this.state.withTooltip ? (
       <EuiToolTip

From f3966a8c8589225cca5415e4989d44769da345bc Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:32:11 -0300
Subject: [PATCH 12/37] style(ribbon-item): adjust max-width for mobile
 responsiveness in ribbon-item component [#7200]

---
 .../main/public/components/common/ribbon/ribbon-item.scss   | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.scss b/plugins/main/public/components/common/ribbon/ribbon-item.scss
index bf543a6a40..ae0e83a0f0 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.scss
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.scss
@@ -2,3 +2,9 @@
   font-size: 12px;
   font-family: sans-serif;
 }
+
+@media (max-width: 767px) {
+  .wz-ribbon-item {
+    max-width: none !important;
+  }
+}

From fd19cee6a729b6fdbb783ae411e184ca64d0b5a6 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:32:22 -0300
Subject: [PATCH 13/37] style(agent-info): update minWidth and maxWidth for
 better layout in agent info component [#7201]

---
 .../public/components/common/welcome/agent-info/agent-info.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 7417f51fc5..45375e4ce3 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -119,7 +119,7 @@ export class AgentInfo extends Component<AgentInfoProps> {
               ? agent.node_name
               : '-',
           label: 'Cluster node',
-          style: { minWidth: 120 },
+          style: { minWidth: 100, maxWidth: 100 },
         },
         {
           key: 'registration-date',

From fba9e1db0a310b5a16bef65aa180b930d44923b5 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:39:55 -0300
Subject: [PATCH 14/37] style(wz-text-tooltip): add anchorClassName for full
 width in tooltip component [#7195]

---
 .../components/common/wz-text-with-tooltip-if-truncated.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index 518ce23fbf..aa1876cde7 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -86,6 +86,7 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
       <EuiToolTip
         content={this.props.tooltip || this.props.children}
         {...this.props.tooltipProps}
+        anchorClassName='wz-width-100'
       >
         {this.buildContent()}
       </EuiToolTip>

From b4928430b8baaea835954eb2991aeebb374cc00f Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:40:06 -0300
Subject: [PATCH 15/37] feat(ribbon-item): enhance rendering logic and add
 render prop for dynamic content

---
 .../components/common/ribbon/ribbon-item.tsx  | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index d22306e5c3..393b5e98b5 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -8,6 +8,7 @@ import { GroupTruncate } from '../util/agent-group-truncate';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
 import './ribbon-item.scss';
 import { getAgentOSType } from '../../../react-services';
+import { TAgentStatus } from '../../../../common/services/wz_agent_status';
 
 const FONT_SIZE = 12;
 
@@ -25,6 +26,7 @@ export type IRibbonItem<LABEL extends string = string, VALUE = any> = {
   isLoading?: boolean;
   icon?: React.ReactNode;
   condensed?: boolean;
+  render?: () => React.ReactNode;
 };
 
 const isGroups = (
@@ -52,9 +54,7 @@ interface RibbonItemProps {
 const WzRibbonItem = (props: RibbonItemProps) => {
   const { item } = props;
 
-  const elementStyle = { ...(item.style || {}), fontSize: FONT_SIZE };
-  const wzWidth100 = { anchorClassName: 'wz-width-100' };
-  const tooltipProps = item.key === 'cluster-node' ? wzWidth100 : {};
+  item.style = { ...item.style, fontSize: FONT_SIZE };
 
   const getPlatformIcon = (agent?: Agent) => {
     let icon = '';
@@ -92,10 +92,20 @@ const WzRibbonItem = (props: RibbonItemProps) => {
     return `${name} ${version}`;
   };
 
-  const renderField = function <T>(field?: T): T | string {
+  const renderOptionalField = function <T>(field?: T): T | string {
     return field !== undefined || field ? field : '-';
   };
 
+  if (isOperatingSystem(item)) {
+    item.render = () => {
+      return (
+        <>
+          {getPlatformIcon(item.value)} {getOsName(item.value)}
+        </>
+      );
+    };
+  }
+
   const renderValue = () => {
     return item.isLoading ? (
       <EuiLoadingSpinner size='s' />
@@ -106,30 +116,21 @@ const WzRibbonItem = (props: RibbonItemProps) => {
         label={'more'}
         action={'redirect'}
       />
-    ) : isOperatingSystem(item) ? (
-      <WzTextWithTooltipIfTruncated
-        position='bottom'
-        tooltipProps={wzWidth100}
-        elementStyle={{
-          ...elementStyle,
-          maxWidth: item.style?.maxWidth,
-        }}
-      >
-        {getPlatformIcon(item.value)} {getOsName(item.value)}
-      </WzTextWithTooltipIfTruncated>
     ) : isStatus(item) ? (
       <AgentStatus
-        status={item.value?.status}
+        status={item.value?.status as TAgentStatus}
         agent={item.value}
-        style={elementStyle}
+        style={item.style}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated
-        position='bottom'
-        tooltipProps={tooltipProps}
-        elementStyle={elementStyle}
-      >
-        {item.icon} {renderField(item.value)}
+      <WzTextWithTooltipIfTruncated elementStyle={item.style}>
+        {item.render ? (
+          item.render()
+        ) : (
+          <>
+            {item.icon} {renderOptionalField(item.value)}
+          </>
+        )}
       </WzTextWithTooltipIfTruncated>
     );
   };

From 7fc2df9267737040fdcbd7163243ec7c430cd9c3 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 12:50:26 -0300
Subject: [PATCH 16/37] style(wz-ribbon-item): prevent growth of ribbon item
 for consistent layout [#7202]

---
 plugins/main/public/components/common/ribbon/ribbon-item.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 393b5e98b5..03455d1fac 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -138,6 +138,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
   return (
     <EuiFlexItem
       className='wz-ribbon-item'
+      grow={false}
       data-test-subj={`ribbon-item-${item.key}`}
       key={item.key}
       style={item.style || null}

From 6cf8c979d471310fa7632fc3d5b98e3479362e19 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 14:03:11 -0300
Subject: [PATCH 17/37] style(wz-ribbon-item): set font size and prevent growth
 for consistent layout across inventory components [#7206]

---
 .../__snapshots__/inventory.test.tsx.snap     | 512 +++++++++---------
 1 file changed, 256 insertions(+), 256 deletions(-)

diff --git a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
index b69d3ed569..a3db2e0d99 100644
--- a/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
+++ b/plugins/main/public/components/agents/syscollector/__snapshots__/inventory.test.tsx.snap
@@ -20,9 +20,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -52,9 +52,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -84,9 +84,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -116,9 +116,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -148,9 +148,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -180,9 +180,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -212,9 +212,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -244,9 +244,9 @@ exports[`Inventory data Network Network interfaces table A Apple agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1474,9 +1474,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1506,9 +1506,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1538,9 +1538,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1570,9 +1570,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1602,9 +1602,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1634,9 +1634,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1666,9 +1666,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -1698,9 +1698,9 @@ exports[`Inventory data Network Network interfaces table A Linux agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -2960,9 +2960,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -2992,9 +2992,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3024,9 +3024,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3056,9 +3056,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3088,9 +3088,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3120,9 +3120,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3152,9 +3152,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -3184,9 +3184,9 @@ exports[`Inventory data Network Network interfaces table A Windows agent should
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4438,9 +4438,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4470,9 +4470,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4502,9 +4502,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4534,9 +4534,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4566,9 +4566,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4598,9 +4598,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4630,9 +4630,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -4662,9 +4662,9 @@ exports[`Inventory data Network Network ports table A Apple agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5892,9 +5892,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5924,9 +5924,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5956,9 +5956,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -5988,9 +5988,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6020,9 +6020,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6052,9 +6052,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6084,9 +6084,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -6116,9 +6116,9 @@ exports[`Inventory data Network Network ports table A Linux agent should render
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7378,9 +7378,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7410,9 +7410,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7442,9 +7442,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7474,9 +7474,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7506,9 +7506,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7538,9 +7538,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7570,9 +7570,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -7602,9 +7602,9 @@ exports[`Inventory data Network Network ports table A Windows agent should rende
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8856,9 +8856,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8888,9 +8888,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8920,9 +8920,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8952,9 +8952,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -8984,9 +8984,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -9016,9 +9016,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -9048,9 +9048,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -9080,9 +9080,9 @@ exports[`Inventory data Network Network settings table A Apple agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10310,9 +10310,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10342,9 +10342,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10374,9 +10374,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10406,9 +10406,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10438,9 +10438,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10470,9 +10470,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10502,9 +10502,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -10534,9 +10534,9 @@ exports[`Inventory data Network Network settings table A Linux agent should rend
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11796,9 +11796,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11828,9 +11828,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11860,9 +11860,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11892,9 +11892,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11924,9 +11924,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11956,9 +11956,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -11988,9 +11988,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -12020,9 +12020,9 @@ exports[`Inventory data Network Network settings table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13274,9 +13274,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13306,9 +13306,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13338,9 +13338,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13370,9 +13370,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13402,9 +13402,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13434,9 +13434,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13466,9 +13466,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13498,9 +13498,9 @@ exports[`Inventory data Processes A Apple agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -13992,9 +13992,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14024,9 +14024,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14056,9 +14056,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14088,9 +14088,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14120,9 +14120,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14152,9 +14152,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14184,9 +14184,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14216,9 +14216,9 @@ exports[`Inventory data Processes A Linux agent should render processes table wi
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14857,9 +14857,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14889,9 +14889,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14921,9 +14921,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14953,9 +14953,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -14985,9 +14985,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15017,9 +15017,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15049,9 +15049,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15081,9 +15081,9 @@ exports[`Inventory data Processes A Windows agent should render processes table
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15600,9 +15600,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15632,9 +15632,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15664,9 +15664,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15696,9 +15696,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15728,9 +15728,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15760,9 +15760,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15792,9 +15792,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -15824,9 +15824,9 @@ exports[`Inventory data Software Packages table A Apple agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16295,9 +16295,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16327,9 +16327,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16359,9 +16359,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16391,9 +16391,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16423,9 +16423,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16455,9 +16455,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16487,9 +16487,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16519,9 +16519,9 @@ exports[`Inventory data Software Packages table A Linux agent should render soft
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -16991,9 +16991,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17023,9 +17023,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17055,9 +17055,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17087,9 +17087,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17119,9 +17119,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17151,9 +17151,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17183,9 +17183,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17215,9 +17215,9 @@ exports[`Inventory data Software Packages table A Windows agent should render so
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -17971,9 +17971,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive wz-ribbon-condensed"
         />
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cores"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18003,9 +18003,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-memory"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18035,9 +18035,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-arch"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18067,9 +18067,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-operating-system"
-          style="max-width:200px"
+          style="max-width:200px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18099,9 +18099,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-cpu"
-          style="max-width:250px"
+          style="max-width:250px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18131,9 +18131,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-hostname"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18163,9 +18163,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-board-serial"
-          style="max-width:100px"
+          style="max-width:100px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"
@@ -18195,9 +18195,9 @@ exports[`Inventory data Software Windows updates table A Windows agent should re
           </div>
         </div>
         <div
-          class="euiFlexItem wz-ribbon-item"
+          class="euiFlexItem euiFlexItem--flexGrowZero wz-ribbon-item"
           data-test-subj="ribbon-item-last-scan"
-          style="max-width:180px"
+          style="max-width:180px;font-size:12px"
         >
           <div
             class="euiStat euiStat--leftAligned"

From fd91842759bf39ecaf53f5bc7a476dae39ee0bf1 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 14:37:16 -0300
Subject: [PATCH 18/37] style(agent-info): remove min-width for agent status to
 enhance layout consistency [#7207]

---
 .../public/components/common/welcome/agent-info/agent-info.tsx  | 1 -
 plugins/main/public/styles/common.scss                          | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 45375e4ce3..689335a438 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -83,7 +83,6 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: RibbonItemLabel.AGENT_STATUS,
           value: agent,
           label: 'Status',
-          style: { minWidth: 100 },
           condensed: true,
         },
         {
diff --git a/plugins/main/public/styles/common.scss b/plugins/main/public/styles/common.scss
index 31007c0175..569d184a89 100644
--- a/plugins/main/public/styles/common.scss
+++ b/plugins/main/public/styles/common.scss
@@ -1593,7 +1593,7 @@ kbn-dis.hide-filter-control .globalFilterGroup__branch {
   display: flex;
 }
 
-@media only screen and (max-width: 1200px) {
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
   .hide-agent-status {
     display: none;
   }

From 61fca9bdc749721081a33d40473866f130ced8c4 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 15:03:53 -0300
Subject: [PATCH 19/37] style(agent-status): add custom margin for icon tip to
 improve alignment [#7208]

---
 plugins/main/public/components/agents/agent-status.scss | 3 +++
 plugins/main/public/components/agents/agent-status.tsx  | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 plugins/main/public/components/agents/agent-status.scss

diff --git a/plugins/main/public/components/agents/agent-status.scss b/plugins/main/public/components/agents/agent-status.scss
new file mode 100644
index 0000000000..18a2c5c104
--- /dev/null
+++ b/plugins/main/public/components/agents/agent-status.scss
@@ -0,0 +1,3 @@
+.wz-agent-icon-tip {
+  margin-left: 5px;
+}
diff --git a/plugins/main/public/components/agents/agent-status.tsx b/plugins/main/public/components/agents/agent-status.tsx
index 65179ba825..22181b58e9 100644
--- a/plugins/main/public/components/agents/agent-status.tsx
+++ b/plugins/main/public/components/agents/agent-status.tsx
@@ -9,6 +9,7 @@ import { EuiIconTip } from '@elastic/eui';
 import { AGENT_STATUS_CODE } from '../../../common/constants';
 import '../../styles/common.scss';
 import { Agent } from '../endpoints-summary/types';
+import './agent-status.scss';
 
 interface AgentStatusProps {
   status: TAgentStatus;
@@ -37,7 +38,7 @@ export const AgentStatus = ({
         tooltip={agentStatusLabelByAgentStatus(status).toLowerCase()}
       />
       <EuiIconTip
-        anchorClassName='wz-margin-left-10'
+        anchorClassName='wz-agent-icon-tip'
         aria-label='Description'
         size='m'
         type='iInCircle'

From 8be190a1b43d1d70375df427fe44c76503111a40 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 15:17:24 -0300
Subject: [PATCH 20/37] style(agent-info): modify IP address styling to support
 IPv6 with adjusted min/max widths [#7209]

---
 .../common/welcome/agent-info/agent-info.tsx          | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 689335a438..43d4371075 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -36,6 +36,10 @@ export class AgentInfo extends Component<AgentInfoProps> {
     });
   }
 
+  isIPv6(ip: string) {
+    return ip.includes(':');
+  }
+
   render() {
     const { agent } = this.props;
     let arrayStats: IRibbonItem[];
@@ -89,7 +93,12 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'ip',
           value: agent.ip,
           label: 'IP address',
-          style: { minWidth: 100, maxWidth: 100 },
+          style: {
+            // IPv4: minWidth: 100, maxWidth: 100
+            // IPv6: minWidth: 150, maxWidth: 150
+            minWidth: this.isIPv6(agent.ip) ? 150 : 100,
+            maxWidth: this.isIPv6(agent.ip) ? 150 : 100,
+          },
           condensed: true,
         },
         {

From ba6c8865c37b9e4ce703edd14abb9ea337edab02 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 15:48:27 -0300
Subject: [PATCH 21/37] style(ribbon): reduce group length in GroupTruncate to
 enhance display [#7210]

---
 .../components/common/ribbon/ribbon-item.tsx  |  2 +-
 .../agent-group-truncate/group-truncate.tsx   | 82 ++++++++++---------
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 03455d1fac..90f7aaa0ed 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -112,7 +112,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
     ) : isGroups(item) && item.value?.length ? (
       <GroupTruncate
         groups={item.value}
-        length={40}
+        length={20}
         label={'more'}
         action={'redirect'}
       />
diff --git a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
index ca79b0c29b..a99e50348b 100644
--- a/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
+++ b/plugins/main/public/components/common/util/agent-group-truncate/group-truncate.tsx
@@ -11,7 +11,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,38 +23,51 @@ import {
 import { endpointGroups } from '../../../../utils/applications';
 import NavigationService from '../../../../react-services/navigation-service';
 
-export class GroupTruncate extends React.Component {
-  _isMount = false;
+const ACTION = {
+  REDIRECT: 'redirect',
+  FILTER: 'filter',
+} as const;
+
+type ACTION = (typeof ACTION)[keyof typeof ACTION];
+
+interface GroupTruncateProps {
+  groups?: string[];
+  label: string;
+  length: number;
+  action: ACTION;
+  filterAction?: (group: string) => void;
+}
+
+export class GroupTruncate extends React.Component<GroupTruncateProps> {
   state: {
-    groups: any;
     popoverOpen: boolean;
   };
-  props!: {
-    groups?: string[];
-    label: String;
-    length: number;
-    action: 'redirect' | 'filter';
-    filterAction?: (group: string) => void;
-  };
 
-  constructor(props) {
+  constructor(props: GroupTruncateProps) {
     super(props);
     this.state = {
-      groups: '',
       popoverOpen: false,
     };
   }
 
+  togglePopover() {
+    this.setState({ popoverOpen: !this.state.popoverOpen });
+  }
+
+  stopPropagation(event: Event) {
+    event.stopPropagation();
+  }
+
   action(group: string) {
     switch (this.props.action) {
-      case 'redirect':
+      case ACTION.REDIRECT:
         return NavigationService.getInstance().navigateToApp(
           endpointGroups.id,
           {
             path: `#/manager/?tab=groups&group=${group}`,
           },
         );
-      case 'filter':
+      case ACTION.FILTER:
         return this.props.filterAction?.(group);
       default:
         console.error('Wrong property in GroupTruncate component');
@@ -62,20 +75,18 @@ export class GroupTruncate extends React.Component {
     }
   }
 
-  renderButton(auxIndex) {
+  renderButton(quantity: number) {
     return (
       <EuiLink
         style={{ textDecoration: 'none', fontWeight: '400', fontSize: 'small' }}
         className={'no-focus'}
-        onMouseDown={ev => {
-          ev.stopPropagation();
-        }}
-        onClick={ev => {
-          ev.stopPropagation();
-          this.setState({ popoverOpen: !this.state.popoverOpen });
+        onMouseDown={this.stopPropagation}
+        onClick={(event: Event) => {
+          event.stopPropagation();
+          this.togglePopover();
         }}
       >
-        &nbsp;{`+${auxIndex} ${this.props.label}`}
+        &nbsp;{`+${quantity} ${this.props.label}`}
       </EuiLink>
     );
   }
@@ -86,11 +97,9 @@ export class GroupTruncate extends React.Component {
         color={'hollow'}
         key={`agent-group-${index}`}
         onClickAriaLabel={`agent-group-${index}`}
-        onMouseDown={ev => {
-          ev.stopPropagation();
-        }}
-        onClick={ev => {
-          ev.stopPropagation();
+        onMouseDown={this.stopPropagation}
+        onClick={(event: Event) => {
+          event.stopPropagation();
           this.action(group);
         }}
       >
@@ -101,16 +110,16 @@ export class GroupTruncate extends React.Component {
 
   renderGroups(groups: string[] = []) {
     const { length } = this.props;
-    let auxGroups: Array<React.ReactNode> = [];
-    let tooltipGroups: Array<React.ReactNode> = [];
+    const auxGroups: React.ReactNode[] = [];
+    const tooltipGroups: React.ReactNode[] = [];
     let auxLength = 0;
     let auxIndex = 0;
     if (groups.length >= 2 && groups.toString().length >= length) {
-      groups.map((group, index) => {
-        auxLength = auxLength + group.length;
+      groups.forEach((group, index) => {
+        auxLength += group.length;
         if (auxLength >= length) {
           tooltipGroups.push(
-            <EuiFlexItem grow={1} key={`agent-group-${index}`}>
+            <EuiFlexItem grow={false} key={`agent-group-${index}`}>
               {this.renderBadge(group, index)}
             </EuiFlexItem>,
           );
@@ -120,14 +129,14 @@ export class GroupTruncate extends React.Component {
         }
       });
     } else {
-      groups.map((group, index) => {
+      groups.forEach((group, index) => {
         auxGroups.push(this.renderBadge(group, index));
       });
     }
     const button = this.renderButton(auxIndex);
     return (
       <span style={{ display: 'inline' }}>
-        <Fragment>{auxGroups}</Fragment>
+        {auxGroups}
         {auxIndex > 0 && (
           <EuiPopover
             button={button}
@@ -148,7 +157,6 @@ export class GroupTruncate extends React.Component {
   }
 
   render() {
-    const groups = this.renderGroups(this.props.groups);
-    return groups;
+    return this.renderGroups(this.props.groups);
   }
 }

From 99d42cf1f96002f71976021eabeb6de97a45d190 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 15:58:55 -0300
Subject: [PATCH 22/37] style(agent-info): streamline styling by removing
 minWidth properties for cleaner display within agent info component [#7211]

---
 .../common/welcome/agent-info/agent-info.tsx       | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 43d4371075..8a31118786 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -71,7 +71,7 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: RibbonItemLabel.OPERATING_SYSTEM,
           value: agent,
           label: 'Operating system',
-          style: { minWidth: 200, maxWidth: 200 },
+          style: { maxWidth: 200 },
         },
       ];
     } else {
@@ -80,7 +80,6 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'id',
           value: agent.id,
           label: 'ID',
-          style: { minWidth: 30 },
           condensed: true,
         },
         {
@@ -94,9 +93,8 @@ export class AgentInfo extends Component<AgentInfoProps> {
           value: agent.ip,
           label: 'IP address',
           style: {
-            // IPv4: minWidth: 100, maxWidth: 100
-            // IPv6: minWidth: 150, maxWidth: 150
-            minWidth: this.isIPv6(agent.ip) ? 150 : 100,
+            // IPv4: maxWidth: 100
+            // IPv6: maxWidth: 150
             maxWidth: this.isIPv6(agent.ip) ? 150 : 100,
           },
           condensed: true,
@@ -105,14 +103,12 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'version',
           value: agent.version,
           label: 'Version',
-          style: { minWidth: 80 },
           condensed: true,
         },
         {
           key: RibbonItemLabel.GROUPS,
           value: agent.group,
           label: 'Group',
-          style: { minWidth: 150 },
         },
         {
           key: RibbonItemLabel.OPERATING_SYSTEM,
@@ -127,19 +123,17 @@ export class AgentInfo extends Component<AgentInfoProps> {
               ? agent.node_name
               : '-',
           label: 'Cluster node',
-          style: { minWidth: 100, maxWidth: 100 },
+          style: { maxWidth: 100 },
         },
         {
           key: 'registration-date',
           value: formatUIDate(agent.dateAdd),
           label: 'Registration date',
-          style: { minWidth: 180 },
         },
         {
           key: 'last-keep-alive',
           value: formatUIDate(agent.lastKeepAlive),
           label: 'Last keep alive',
-          style: { minWidth: 180 },
         },
       ];
     }

From 44b56b701e8cd01ae6ddb53a6fea4f4c7bb98241 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Tue, 10 Dec 2024 16:05:42 -0300
Subject: [PATCH 23/37] style(wz-text-tooltip): enhance text display
 responsiveness with word-break and white-space adjustments for smaller
 screens [#7212]

---
 .../components/common/wz-text-with-tooltip-if-truncated.scss    | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
index 4d148ae303..86ebf18984 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.scss
@@ -6,5 +6,7 @@
 
   @media (max-width: 767px) {
     max-width: none !important;
+    word-break: break-word;
+    white-space: normal;
   }
 }

From eb95366e8c60ff16d9cf51adeaae98824bdfeddb Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:14:33 -0300
Subject: [PATCH 24/37] Update lifecycle method from componentDidMount to
 componentDidUpdate

---
 .../components/common/wz-text-with-tooltip-if-truncated.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index aa1876cde7..9169c3847d 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -39,7 +39,7 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
     };
   }
 
-  componentDidMount() {
+  componentDidUpdate() {
     this.timer = setTimeout(() => {
       // HTML element reference with text (maybe truncated)
       const reference = this.contentReference.current as HTMLElement;

From ade7a4b6f96d91847bef4fa1f563b01600efaa16 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:14:38 -0300
Subject: [PATCH 25/37] Increase group truncate length to 30 characters

---
 plugins/main/public/components/common/ribbon/ribbon-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 90f7aaa0ed..2456e960eb 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -112,7 +112,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
     ) : isGroups(item) && item.value?.length ? (
       <GroupTruncate
         groups={item.value}
-        length={20}
+        length={30}
         label={'more'}
         action={'redirect'}
       />

From 5fc9bd82e62b174c8c9dc0e31a010ddcfc71827b Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:15:24 -0300
Subject: [PATCH 26/37] style(agent-info): make 'Group' value condensed and
 remove maxWidth for 'Operating system' display

---
 .../public/components/common/welcome/agent-info/agent-info.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 8a31118786..0781d60cae 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -109,12 +109,12 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: RibbonItemLabel.GROUPS,
           value: agent.group,
           label: 'Group',
+          condensed: true,
         },
         {
           key: RibbonItemLabel.OPERATING_SYSTEM,
           value: agent,
           label: 'Operating system',
-          style: { maxWidth: 150 },
         },
         {
           key: 'cluster-node',

From 0ab22710cac55fb7491523401af7a586afc9a93a Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:45:46 -0300
Subject: [PATCH 27/37] fix(ribbon-item): rename elementStyle to contentStyle
 for clarity in WzTextWithTooltipIfTruncated component

---
 .../main/public/components/common/ribbon/ribbon-item.tsx    | 2 +-
 .../components/common/wz-text-with-tooltip-if-truncated.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 2456e960eb..5f2d1d58e3 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -123,7 +123,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
         style={item.style}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated elementStyle={item.style}>
+      <WzTextWithTooltipIfTruncated contentStyle={item.style}>
         {item.render ? (
           item.render()
         ) : (
diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index 9169c3847d..634a6ef952 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -17,13 +17,13 @@ import './wz-text-with-tooltip-if-truncated.scss';
 
 interface WzTextWithTooltipIfTruncatedProps extends React.PropsWithChildren {
   tooltip?: string;
-  elementStyle?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   tooltipProps?: object;
 }
 
 export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTooltipIfTruncatedProps> {
   static defaultProps = {
-    elementStyle: {},
+    contentStyle: {},
   };
   state: {
     withTooltip: boolean;
@@ -74,7 +74,7 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
       <span
         ref={this.contentReference}
         className='wz-text-content'
-        style={this.props.elementStyle}
+        style={this.props.contentStyle}
       >
         {this.props.children || this.props.tooltip}
       </span>

From 1ad68b9080b3844124f33664611a8725884f8e17 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:45:54 -0300
Subject: [PATCH 28/37] refactor(wz-text-tooltip): rename buildContent to
 renderContent for improved readability in WzTextWithTooltipIfTruncated
 component

---
 .../components/common/wz-text-with-tooltip-if-truncated.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index 634a6ef952..1ceae8f0a2 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -69,7 +69,7 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
     }
   }
 
-  buildContent() {
+  renderContent() {
     return (
       <span
         ref={this.contentReference}
@@ -88,10 +88,10 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
         {...this.props.tooltipProps}
         anchorClassName='wz-width-100'
       >
-        {this.buildContent()}
+        {this.renderContent()}
       </EuiToolTip>
     ) : (
-      this.buildContent()
+      this.renderContent()
     );
   }
 }

From 1067c83ed1c68f9c1f21848a3382688d2d7ac599 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:52:36 -0300
Subject: [PATCH 29/37] refactor(wz-text-tooltip): extract createClone method
 for cleaner code and improved readability in WzTextWithTooltipIfTruncated
 component

---
 .../wz-text-with-tooltip-if-truncated.tsx     | 39 +++++++++++--------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index 1ceae8f0a2..59d0cafb29 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -39,26 +39,33 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
     };
   }
 
+  /**
+   * The function `createClone` creates a clone of an HTML element with specific
+   * styling properties.
+   * @param {HTMLElement} reference - The `reference` parameter in the `createClone`
+   * function is an HTMLElement that serves as the reference element from which a
+   * clone will be created.
+   * @returns The function `createClone` returns a clone of the provided
+   * `HTMLElement` reference with specific styles applied.
+   */
+  createClone(reference: HTMLElement) {
+    // HTML element clone of reference
+    const clone = reference.cloneNode(true) as HTMLElement;
+    clone.style.display = 'inline';
+    clone.style.width = 'auto';
+    clone.style.visibility = 'hidden';
+    clone.style.maxWidth = 'none';
+    return clone;
+  }
+
   componentDidUpdate() {
     this.timer = setTimeout(() => {
-      // HTML element reference with text (maybe truncated)
       const reference = this.contentReference.current as HTMLElement;
-      // HTML element clone of reference
-      const clone = reference.cloneNode(true) as HTMLElement;
-      clone.style.display = 'inline';
-      clone.style.width = 'auto';
-      clone.style.visibility = 'hidden';
-      clone.style.maxWidth = 'none';
-      // Insert clone in DOM appending as sibling of reference to measure both
-      // reference.parentNode.appendChild(clone);
-      // Insert clone in DOM as body child
+      const clone = this.createClone(reference);
       document.body.appendChild(clone);
-      // Compare widths
-      if (reference.offsetWidth < clone.offsetWidth) {
-        // Set withTooltip to true to render truncated element with a tooltip
-        this.setState({ withTooltip: true });
-      }
-      // Remove clone of DOM
+      this.setState({
+        withTooltip: reference.offsetWidth < clone.offsetWidth,
+      });
       clone.remove();
     });
   }

From f61d79f74d84776b3c3e90576fbb2d3b30783fb9 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 09:55:10 -0300
Subject: [PATCH 30/37] refactor(ribbon-item): change item.style to
 contentStyle for improved clarity in WzRibbonItem component

---
 plugins/main/public/components/common/ribbon/ribbon-item.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 5f2d1d58e3..7c95f6b346 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -54,7 +54,7 @@ interface RibbonItemProps {
 const WzRibbonItem = (props: RibbonItemProps) => {
   const { item } = props;
 
-  item.style = { ...item.style, fontSize: FONT_SIZE };
+  const contentStyle = { ...item.style, fontSize: FONT_SIZE };
 
   const getPlatformIcon = (agent?: Agent) => {
     let icon = '';
@@ -123,7 +123,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
         style={item.style}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated contentStyle={item.style}>
+      <WzTextWithTooltipIfTruncated contentStyle={contentStyle}>
         {item.render ? (
           item.render()
         ) : (

From d93efd4d790ea46d8636870fb556c496b0247a06 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 11:16:52 -0300
Subject: [PATCH 31/37] feat(platform): add getPlatformIcon and getOsName
 functions for improved agent OS representation in the application

---
 .../components/common/platform/index.tsx      | 44 +++++++++++++++
 .../components/common/ribbon/ribbon-item.tsx  | 55 -------------------
 2 files changed, 44 insertions(+), 55 deletions(-)
 create mode 100644 plugins/main/public/components/common/platform/index.tsx

diff --git a/plugins/main/public/components/common/platform/index.tsx b/plugins/main/public/components/common/platform/index.tsx
new file mode 100644
index 0000000000..a3b70d9929
--- /dev/null
+++ b/plugins/main/public/components/common/platform/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants';
+import { getAgentOSType } from '../../../react-services';
+import { Agent } from '../../endpoints-summary/types';
+
+export const getPlatformIcon = (agent?: Agent): React.JSX.Element => {
+  let icon = '';
+  const osType = getAgentOSType(agent);
+  if (osType === WAZUH_AGENTS_OS_TYPE.DARWIN) {
+    icon = 'apple';
+  } else if (
+    [WAZUH_AGENTS_OS_TYPE.WINDOWS, WAZUH_AGENTS_OS_TYPE.LINUX].includes(osType)
+  ) {
+    icon = osType;
+  }
+
+  if (icon) {
+    return (
+      <i
+        className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${osType}`}
+        aria-hidden='true'
+      ></i>
+    );
+  }
+  return <></>;
+};
+
+export const getOsName = (agent?: Agent) => {
+  const { name, version } = agent?.os || {};
+
+  if (!name && !version) {
+    return '-';
+  }
+
+  if (!version) {
+    return name;
+  }
+
+  if (!name) {
+    return version;
+  }
+
+  return `${name} ${version}`;
+};
diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 7c95f6b346..32fbab9b6c 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -1,13 +1,11 @@
 import { EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
 import React from 'react';
-import { WAZUH_AGENTS_OS_TYPE } from '../../../../common/constants';
 import { AgentStatus } from '../../agents/agent-status';
 import { Agent } from '../../endpoints-summary/types';
 import { WzStat } from '../../wz-stat';
 import { GroupTruncate } from '../util/agent-group-truncate';
 import WzTextWithTooltipIfTruncated from '../wz-text-with-tooltip-if-truncated';
 import './ribbon-item.scss';
-import { getAgentOSType } from '../../../react-services';
 import { TAgentStatus } from '../../../../common/services/wz_agent_status';
 
 const FONT_SIZE = 12;
@@ -24,7 +22,6 @@ export type IRibbonItem<LABEL extends string = string, VALUE = any> = {
   value: VALUE;
   style?: React.CSSProperties;
   isLoading?: boolean;
-  icon?: React.ReactNode;
   condensed?: boolean;
   render?: () => React.ReactNode;
 };
@@ -35,12 +32,6 @@ const isGroups = (
   return item.key === RibbonItemLabel.GROUPS;
 };
 
-const isOperatingSystem = (
-  item: IRibbonItem,
-): item is IRibbonItem<RibbonItemLabel.OPERATING_SYSTEM, Agent> => {
-  return item.key === RibbonItemLabel.OPERATING_SYSTEM;
-};
-
 const isStatus = (
   item: IRibbonItem,
 ): item is IRibbonItem<RibbonItemLabel.AGENT_STATUS, Agent> => {
@@ -56,56 +47,10 @@ const WzRibbonItem = (props: RibbonItemProps) => {
 
   const contentStyle = { ...item.style, fontSize: FONT_SIZE };
 
-  const getPlatformIcon = (agent?: Agent) => {
-    let icon = '';
-    let osType = getAgentOSType(agent);
-    if (osType === WAZUH_AGENTS_OS_TYPE.DARWIN) {
-      icon = 'apple';
-    } else if (
-      [WAZUH_AGENTS_OS_TYPE.WINDOWS, WAZUH_AGENTS_OS_TYPE.LINUX].includes(
-        osType,
-      )
-    ) {
-      icon = osType;
-    }
-
-    if (icon) {
-      return (
-        <i
-          className={`fa fa-${icon} AgentsTable__soBadge AgentsTable__soBadge--${osType}`}
-          aria-hidden='true'
-        ></i>
-      );
-    }
-    return <></>;
-  };
-
-  const getOsName = (agent?: Agent) => {
-    const { name, version } = agent?.os || {};
-
-    if (!name && !version) return '-';
-
-    if (!version) return name;
-
-    if (!name) return version;
-
-    return `${name} ${version}`;
-  };
-
   const renderOptionalField = function <T>(field?: T): T | string {
     return field !== undefined || field ? field : '-';
   };
 
-  if (isOperatingSystem(item)) {
-    item.render = () => {
-      return (
-        <>
-          {getPlatformIcon(item.value)} {getOsName(item.value)}
-        </>
-      );
-    };
-  }
-
   const renderValue = () => {
     return item.isLoading ? (
       <EuiLoadingSpinner size='s' />

From 0c3c4634556c7d11a0e9a2c9c6649218c71e4d70 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 11:16:59 -0300
Subject: [PATCH 32/37] feat(agent-info): enhance OS display by integrating
 platform icon and name in InventoryMetrics and AgentInfo components

---
 .../components/syscollector-metrics.tsx         |  8 ++++++++
 .../components/common/ribbon/ribbon-item.tsx    | 17 ++++++++---------
 .../common/welcome/agent-info/agent-info.tsx    |  7 +++++++
 3 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx b/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
index 682e29585b..1f75f8f8c8 100644
--- a/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
+++ b/plugins/main/public/components/agents/syscollector/components/syscollector-metrics.tsx
@@ -8,6 +8,8 @@ import {
   IRibbonItem,
   RibbonItemLabel,
 } from '../../../common/ribbon/ribbon-item';
+import { getOsName, getPlatformIcon } from '../../../common/platform';
+import { Agent } from '../../../endpoints-summary/types';
 
 export function InventoryMetrics({ agent }) {
   const [params, setParams] = useState({});
@@ -70,6 +72,12 @@ export function InventoryMetrics({ agent }) {
         label: 'Operating system',
         isLoading: syscollector.isLoading,
         style: { maxWidth: 200 },
+        render: (value: Agent) => (
+          <>
+            {getPlatformIcon(value)}
+            {getOsName(value)}
+          </>
+        ),
       },
       {
         key: 'cpu',
diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 32fbab9b6c..76bceb3c02 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -23,7 +23,7 @@ export type IRibbonItem<LABEL extends string = string, VALUE = any> = {
   style?: React.CSSProperties;
   isLoading?: boolean;
   condensed?: boolean;
-  render?: () => React.ReactNode;
+  render?: (value: any) => React.ReactNode;
 };
 
 const isGroups = (
@@ -68,14 +68,13 @@ const WzRibbonItem = (props: RibbonItemProps) => {
         style={item.style}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated contentStyle={contentStyle}>
-        {item.render ? (
-          item.render()
-        ) : (
-          <>
-            {item.icon} {renderOptionalField(item.value)}
-          </>
-        )}
+      <WzTextWithTooltipIfTruncated
+        contentStyle={contentStyle}
+        icon={item.icon}
+      >
+        {item.render
+          ? item.render(item.value)
+          : renderOptionalField(item.value)}
       </WzTextWithTooltipIfTruncated>
     );
   };
diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 0781d60cae..83d237fbe0 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -17,6 +17,7 @@ import { formatUIDate } from '../../../../react-services/time-service';
 import { Agent } from '../../../endpoints-summary/types';
 import { RibbonItemLabel, type IRibbonItem } from '../../ribbon/ribbon-item';
 import WzRibbon from '../../ribbon/ribbon';
+import { getOsName, getPlatformIcon } from '../../platform';
 
 interface AgentInfoProps {
   agent: Agent;
@@ -115,6 +116,12 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: RibbonItemLabel.OPERATING_SYSTEM,
           value: agent,
           label: 'Operating system',
+          render: (value: Agent) => (
+            <>
+              {getPlatformIcon(value)}
+              {getOsName(value)}
+            </>
+          ),
         },
         {
           key: 'cluster-node',

From 46450be18cc12c2c8c4173a31278532c9f450239 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 11:18:11 -0300
Subject: [PATCH 33/37] refactor(ribbon-item): update
 WzTextWithTooltipIfTruncated to use contentStyle for cleaner code in
 ribbon-item component

---
 .../main/public/components/common/ribbon/ribbon-item.tsx   | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index 76bceb3c02..f56daa9869 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -65,13 +65,10 @@ const WzRibbonItem = (props: RibbonItemProps) => {
       <AgentStatus
         status={item.value?.status as TAgentStatus}
         agent={item.value}
-        style={item.style}
+        style={contentStyle}
       />
     ) : (
-      <WzTextWithTooltipIfTruncated
-        contentStyle={contentStyle}
-        icon={item.icon}
-      >
+      <WzTextWithTooltipIfTruncated contentStyle={contentStyle}>
         {item.render
           ? item.render(item.value)
           : renderOptionalField(item.value)}

From f7eb711c5fa337eb3a1b738cac4b9ccff44f02af Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 11:18:35 -0300
Subject: [PATCH 34/37] refactor(ribbon-item): use contentStyle instead of
 item.style for improved clarity in ribbon-item component rendering

---
 plugins/main/public/components/common/ribbon/ribbon-item.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/main/public/components/common/ribbon/ribbon-item.tsx b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
index f56daa9869..b3fbb2a5f8 100644
--- a/plugins/main/public/components/common/ribbon/ribbon-item.tsx
+++ b/plugins/main/public/components/common/ribbon/ribbon-item.tsx
@@ -82,7 +82,7 @@ const WzRibbonItem = (props: RibbonItemProps) => {
       grow={false}
       data-test-subj={`ribbon-item-${item.key}`}
       key={item.key}
-      style={item.style || null}
+      style={contentStyle || null}
     >
       <WzStat title={renderValue()} description={item.label} titleSize='xs' />
     </EuiFlexItem>

From 0371c6a7f96da0689c9a0d6af18f9e1a8ba0bd3d Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 11:42:29 -0300
Subject: [PATCH 35/37] refactor(wz-text-with-tooltip): convert class to
 functional component with hooks for cleaner state management and rendering
 logic

---
 .../wz-text-with-tooltip-if-truncated.tsx     | 91 ++++++++-----------
 1 file changed, 39 insertions(+), 52 deletions(-)

diff --git a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
index 59d0cafb29..5ff4ab948d 100644
--- a/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
+++ b/plugins/main/public/components/common/wz-text-with-tooltip-if-truncated.tsx
@@ -11,7 +11,7 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React, { Component } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { EuiToolTip } from '@elastic/eui';
 import './wz-text-with-tooltip-if-truncated.scss';
 
@@ -21,23 +21,12 @@ interface WzTextWithTooltipIfTruncatedProps extends React.PropsWithChildren {
   tooltipProps?: object;
 }
 
-export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTooltipIfTruncatedProps> {
-  static defaultProps = {
-    contentStyle: {},
-  };
-  state: {
-    withTooltip: boolean;
-  };
-  timer?: ReturnType<typeof setTimeout>;
-  contentReference: React.RefObject<HTMLElement>;
-
-  constructor(props: WzTextWithTooltipIfTruncatedProps) {
-    super(props);
-    this.contentReference = React.createRef<HTMLElement>();
-    this.state = {
-      withTooltip: false,
-    };
-  }
+const WzTextWithTooltipIfTruncated = (
+  props: WzTextWithTooltipIfTruncatedProps,
+) => {
+  const { contentStyle = {}, tooltip, tooltipProps, children } = props;
+  const [withTooltip, setWithTooltip] = useState(false);
+  const contentReference = useRef<HTMLElement>(null);
 
   /**
    * The function `createClone` creates a clone of an HTML element with specific
@@ -48,7 +37,7 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
    * @returns The function `createClone` returns a clone of the provided
    * `HTMLElement` reference with specific styles applied.
    */
-  createClone(reference: HTMLElement) {
+  const createClone = (reference: HTMLElement) => {
     // HTML element clone of reference
     const clone = reference.cloneNode(true) as HTMLElement;
     clone.style.display = 'inline';
@@ -56,49 +45,47 @@ export default class WzTextWithTooltipIfTruncated extends Component<WzTextWithTo
     clone.style.visibility = 'hidden';
     clone.style.maxWidth = 'none';
     return clone;
-  }
+  };
 
-  componentDidUpdate() {
-    this.timer = setTimeout(() => {
-      const reference = this.contentReference.current as HTMLElement;
-      const clone = this.createClone(reference);
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const reference = contentReference.current as HTMLElement;
+      const clone = createClone(reference);
       document.body.appendChild(clone);
-      this.setState({
-        withTooltip: reference.offsetWidth < clone.offsetWidth,
-      });
+      setWithTooltip(reference.offsetWidth < clone.offsetWidth);
       clone.remove();
     });
-  }
 
-  componentWillUnmount() {
-    if (this.timer) {
-      clearTimeout(this.timer);
-    }
-  }
+    return () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+    };
+  }, [children]);
 
-  renderContent() {
+  const renderContent = () => {
     return (
       <span
-        ref={this.contentReference}
+        ref={contentReference}
         className='wz-text-content'
-        style={this.props.contentStyle}
+        style={contentStyle}
       >
-        {this.props.children || this.props.tooltip}
+        {children || tooltip}
       </span>
     );
-  }
+  };
 
-  render() {
-    return this.state.withTooltip ? (
-      <EuiToolTip
-        content={this.props.tooltip || this.props.children}
-        {...this.props.tooltipProps}
-        anchorClassName='wz-width-100'
-      >
-        {this.renderContent()}
-      </EuiToolTip>
-    ) : (
-      this.renderContent()
-    );
-  }
-}
+  return withTooltip ? (
+    <EuiToolTip
+      content={tooltip || children}
+      {...tooltipProps}
+      anchorClassName='wz-width-100'
+    >
+      {renderContent()}
+    </EuiToolTip>
+  ) : (
+    renderContent()
+  );
+};
+
+export default React.memo(WzTextWithTooltipIfTruncated);

From 7f7d2c74b9d089536b148a9dbf097fb10af3b9dc Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 15:00:46 -0300
Subject: [PATCH 36/37] refactor(agent-info): add minWidth style to
 registration and last keep-alive fields for better layout consistency

---
 .../public/components/common/welcome/agent-info/agent-info.tsx  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
index 83d237fbe0..c72055e567 100644
--- a/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
+++ b/plugins/main/public/components/common/welcome/agent-info/agent-info.tsx
@@ -136,11 +136,13 @@ export class AgentInfo extends Component<AgentInfoProps> {
           key: 'registration-date',
           value: formatUIDate(agent.dateAdd),
           label: 'Registration date',
+          style: { minWidth: 165 },
         },
         {
           key: 'last-keep-alive',
           value: formatUIDate(agent.lastKeepAlive),
           label: 'Last keep alive',
+          style: { minWidth: 165 },
         },
       ];
     }

From 6de338ea94391e2b04cce15a28c3b983d0c940a8 Mon Sep 17 00:00:00 2001
From: Guido Modarelli <guidomodarelli25@gmail.com>
Date: Wed, 11 Dec 2024 15:18:32 -0300
Subject: [PATCH 37/37] refactor(agent-status): update tooltip class name for
 improved styling consistency in status indicators

---
 .../agents/__snapshots__/agent-status.test.tsx.snap       | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
index 281620631e..6e7375e505 100644
--- a/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
+++ b/plugins/main/public/components/agents/__snapshots__/agent-status.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     active
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-hidden="true"
@@ -112,7 +112,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     disconnected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -180,7 +180,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     never connected
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"
@@ -248,7 +248,7 @@ exports[`AgentStatus component Renders status indicator with the its color and t
     pending
   </span>
   <span
-    class="euiToolTipAnchor wz-margin-left-10"
+    class="euiToolTipAnchor wz-agent-icon-tip"
   >
     <svg
       aria-label="Description"