[SecuritySolution] Fix entity page link clickable area on entity flyo…

…ut header (#177988) issue: #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)
elastic · Mar 5, 2024 · 70f6349 · 70f6349
1 parent 6cb73aa
commit 70f6349
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
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
@@ -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
@@ -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>