[8.2.1] [Session View] mouse over highlighting gap fix (#129679)

* mouse over highlighting gap fix

* addressing PR comments + more CSS fixes

* added show more button if we have more than 5 execs

* added padding for first alert in groups alert

* fix check CI issue

* addressing PR comments

x-pack/plugins/session_view/public/components/detail_panel_alert_group_item/index.tsx

@@ -66,6 +66,7 @@ export const DetailPanelAlertGroupItem = ({
           data-test-subj={ALERT_GROUP_ITEM_COUNT_TEST_ID}
           className="eui-alignCenter"
           size="m"
+          css={styles.alertCountArrowPad}
         >
           {alertsCount}
         </EuiNotificationBadge>

x-pack/plugins/session_view/public/components/detail_panel_alert_list_item/index.tsx

@@ -59,7 +59,7 @@ export const DetailPanelAlertListItem = ({
   const forceState = !isInvestigated ? 'open' : undefined;
 
   return minimal ? (
-    <div data-test-subj={ALERT_LIST_ITEM_TEST_ID}>
+    <div data-test-subj={ALERT_LIST_ITEM_TEST_ID} css={styles.firstAlertPad}>
       <EuiSpacer size="xs" />
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>

x-pack/plugins/session_view/public/components/detail_panel_alert_list_item/styles.ts

@@ -79,6 +79,10 @@ export const useStyles = (minimal = false, isInvestigated = false) => {
       minWidth: 0,
     };
 
+    const alertCountArrowPad: CSSObject = {
+      marginRight: size.xs,
+    };
+
     const processPanel: CSSObject = {
       border: `${borderThickness} solid ${colors.lightShade}`,
       fontFamily: font.familyCode,
@@ -103,6 +107,12 @@ export const useStyles = (minimal = false, isInvestigated = false) => {
       float: 'right',
     };
 
+    const firstAlertPad: CSSObject = {
+      '&:first-child': {
+        paddingTop: size.base,
+      },
+    };
+
     const minimalHR: CSSObject = {
       marginBottom: 0,
     };
@@ -114,9 +124,11 @@ export const useStyles = (minimal = false, isInvestigated = false) => {
       alertTitle,
       alertIcon,
       alertAccordionButton,
+      alertCountArrowPad,
       processPanel,
       investigatedLabel,
       minimalContextMenu,
+      firstAlertPad,
       minimalHR,
     };
   }, [euiTheme, isInvestigated, minimal]);

x-pack/plugins/session_view/public/components/detail_panel_description_list/styles.ts

@@ -20,14 +20,14 @@ export const useStyles = () => {
     const tabListTitle = {
       width: '40%',
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'baseline',
       marginTop: '0px',
     };
 
     const tabListDescription = {
       width: '60%',
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'baseline',
       marginTop: '0px',
     };
 

x-pack/plugins/session_view/public/components/detail_panel_list_item/styles.ts

@@ -20,11 +20,11 @@ export const useStyles = ({ display }: StylesDeps) => {
     const item: CSSObject = {
       display,
       alignContent: 'center',
-      padding: `0px ${euiTheme.size.s} `,
+      padding: `${euiTheme.size.xs} ${euiTheme.size.s} `,
       width: '100%',
       fontWeight: 'inherit',
-      height: euiTheme.size.xl,
-      lineHeight: euiTheme.size.l,
+      height: 'max-content',
+      minHeight: euiTheme.size.l,
       letterSpacing: '0px',
       textAlign: 'left',
 
@@ -43,7 +43,7 @@ export const useStyles = ({ display }: StylesDeps) => {
       '&:hover': {
         background: transparentize(euiTheme.colors.primary, 0.1),
       },
-      height: '100%',
+      height: 'fit-content',
     };
 
     return {