diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
index 40227ec24a9e..a37ddd0bd61d 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx
@@ -81,9 +81,11 @@ export const EndpointDetailsFlyout = memo(() => {
     >
       <EuiFlyoutHeader hasBorder>
         <EuiTitle size="s">
-          <h2 data-test-subj="endpointDetailsFlyoutTitle">
-            {loading ? <EuiLoadingContent lines={1} /> : details?.host?.hostname}
-          </h2>
+          {loading ? (
+            <EuiLoadingContent lines={1} />
+          ) : (
+            <h2 data-test-subj="endpointDetailsFlyoutTitle"> {details?.host?.hostname} </h2>
+          )}
         </EuiTitle>
       </EuiFlyoutHeader>
       {details === undefined ? (