[Cloud Posture] add hover to posture score cells (#154506)

## Summary

This is part of a Quick Wins
[ticket](https://github.com/elastic/security-team/issues/6291)

This PR allows for the posture column cell to be hoverable by width and
height to a wrapper element and moving `EuiTooltip` to be the wrapper
element around the EuiFlexGroup.

<img width="248" alt="image"
src="https://user-images.githubusercontent.com/17135495/230241723-418d5b0b-4df9-49a6-90a4-33cff3441b68.png">

x-pack/plugins/cloud_security_posture/public/components/compliance_score_bar.tsx

@@ -22,22 +22,27 @@ export const ComplianceScoreBar = ({
   const complianceScore = calculatePostureScore(totalPassed, totalFailed);
 
   return (
-    <EuiFlexGroup
-      gutterSize="none"
-      alignItems="center"
-      justifyContent="flexEnd"
-      style={{ gap: euiTheme.size.s }}
+    <EuiToolTip
+      anchorClassName="cspComplianceScoreBarTooltip"
+      content={i18n.translate('xpack.csp.complianceScoreBar.tooltipTitle', {
+        defaultMessage: '{failed} failed and {passed} passed findings',
+        values: {
+          passed: totalPassed,
+          failed: totalFailed,
+        },
+      })}
     >
-      <EuiFlexItem>
-        <EuiToolTip
-          content={i18n.translate('xpack.csp.complianceScoreBar.tooltipTitle', {
-            defaultMessage: '{failed} failed and {passed} passed findings',
-            values: {
-              passed: totalPassed,
-              failed: totalFailed,
-            },
-          })}
-        >
+      <EuiFlexGroup
+        gutterSize="none"
+        alignItems="center"
+        justifyContent="flexEnd"
+        style={{
+          height: '32px',
+          cursor: 'pointer',
+          gap: `${euiTheme.size.s}`,
+        }}
+      >
+        <EuiFlexItem>
           <EuiFlexGroup
             gutterSize="none"
             style={{
@@ -64,14 +69,14 @@ export const ComplianceScoreBar = ({
               />
             )}
           </EuiFlexGroup>
-        </EuiToolTip>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiText
-          size="xs"
-          style={{ fontWeight: euiTheme.font.weight.bold }}
-        >{`${complianceScore.toFixed(0)}%`}</EuiText>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText
+            size="xs"
+            style={{ fontWeight: euiTheme.font.weight.bold }}
+          >{`${complianceScore.toFixed(0)}%`}</EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiToolTip>
   );
 };

x-pack/plugins/cloud_security_posture/public/pages/configurations/latest_findings_by_resource/findings_by_resource_table.tsx

@@ -18,6 +18,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import numeral from '@elastic/numeral';
 import { generatePath, Link } from 'react-router-dom';
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { ColumnNameWithTooltip } from '../../../components/column_name_with_tooltip';
 import { ComplianceScoreBar } from '../../../components/compliance_score_bar';
 import * as TEST_SUBJECTS from '../test_subjects';
@@ -188,10 +189,19 @@ const baseColumns: Array<EuiTableFieldDataColumnType<FindingsByResourcePage>> =
       />
     ),
     render: (complianceScore: FindingsByResourcePage['compliance_score'], data) => (
-      <ComplianceScoreBar
-        totalPassed={data.findings.passed_findings}
-        totalFailed={data.findings.failed_findings}
-      />
+      <div
+        css={css`
+          width: 100%;
+          .cspComplianceScoreBarTooltip {
+            width: 100%;
+          }
+        `}
+      >
+        <ComplianceScoreBar
+          totalPassed={data.findings.passed_findings}
+          totalFailed={data.findings.failed_findings}
+        />
+      </div>
     ),
     dataType: 'number',
   },