From 70f634931759e8f31d485a8fadc0854c2a41566a Mon Sep 17 00:00:00 2001
From: Pablo Machado <pablo.nevesmachado@elastic.co>
Date: Tue, 5 Mar 2024 16:33:55 +0100
Subject: [PATCH] [SecuritySolution] Fix entity page link clickable area on
 entity flyout header (#177988)

issue: https://github.com/elastic/kibana/issues/177877

## Summary

* Make the link width fit the content

### Before
![Screenshot 2024-03-05 at 11 24
09](https://github.com/elastic/kibana/assets/1490444/359b90e5-defc-40f7-8ddd-fc84237eb2d7)

### After
![Screenshot 2024-03-05 at 11 24
55](https://github.com/elastic/kibana/assets/1490444/c557d7a8-294c-47c7-935a-62cb3dff5a13)
---
 .../public/flyout/entity_details/host_right/header.tsx         | 3 +++
 .../public/flyout/entity_details/user_right/header.tsx         | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/header.tsx b/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/header.tsx
index e8785a92acb6d..b5df2f81d1b0a 100644
--- a/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/header.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/entity_details/host_right/header.tsx
@@ -22,6 +22,8 @@ interface HostPanelHeaderProps {
   observedHost: ObservedEntityData<HostItem>;
 }
 
+const linkTitleCSS = { width: 'fit-content' };
+
 export const HostPanelHeader = ({ hostName, observedHost }: HostPanelHeaderProps) => {
   const lastSeenDate = useMemo(
     () => observedHost.lastSeen.date && new Date(observedHost.lastSeen.date),
@@ -43,6 +45,7 @@ export const HostPanelHeader = ({ hostName, observedHost }: HostPanelHeaderProps
             path={getHostDetailsUrl(hostName)}
             target={'_blank'}
             external={false}
+            css={linkTitleCSS}
           >
             <FlyoutTitle title={hostName} iconType={'storage'} isLink />
           </SecuritySolutionLinkAnchor>
diff --git a/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/header.tsx b/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/header.tsx
index 6390b5a7e49ee..f8ff1070d9cbc 100644
--- a/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/header.tsx
+++ b/x-pack/plugins/security_solution/public/flyout/entity_details/user_right/header.tsx
@@ -27,6 +27,8 @@ interface UserPanelHeaderProps {
   managedUser: ManagedUserData;
 }
 
+const linkTitleCSS = { width: 'fit-content' };
+
 export const UserPanelHeader = ({ userName, observedUser, managedUser }: UserPanelHeaderProps) => {
   const oktaTimestamp = managedUser.data?.[ManagedUserDatasetKey.OKTA]?.fields?.[
     '@timestamp'
@@ -59,6 +61,7 @@ export const UserPanelHeader = ({ userName, observedUser, managedUser }: UserPan
             path={getUsersDetailsUrl(userName)}
             target={'_blank'}
             external={false}
+            css={linkTitleCSS}
           >
             <FlyoutTitle title={userName} iconType={'user'} isLink />
           </SecuritySolutionLinkAnchor>