[8.11] [Security Solution] Fix analyzer panel width (#172026) (#172328)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[Security Solution] Fix analyzer panel width
(#172026)](#172026)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"christineweng","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-11-30T21:14:57Z","message":"[Security
Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes
column not breaking correctly in analyzer. 3 places where this
bug\r\noccured: node details, event details and control panel. Event
details\r\npanel was fixed in
[PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers
the other
two.\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/e0bf64d2-06f9-42e9-b3fd-d26be1a1a48c)\r\n\r\nAfter\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/bb5b3061-6b3b-4701-acf5-cf8db292ef4e)\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:
SecuritySolution","Team:Threat
Hunting:Investigations","v8.12.0","v8.11.2"],"number":172026,"url":"https://github.com/elastic/kibana/pull/172026","mergeCommit":{"message":"[Security
Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes
column not breaking correctly in analyzer. 3 places where this
bug\r\noccured: node details, event details and control panel. Event
details\r\npanel was fixed in
[PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers
the other
two.\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/e0bf64d2-06f9-42e9-b3fd-d26be1a1a48c)\r\n\r\nAfter\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/bb5b3061-6b3b-4701-acf5-cf8db292ef4e)\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/172026","number":172026,"mergeCommit":{"message":"[Security
Solution] Fix analyzer panel width (#172026)\n\n## Summary\r\n\r\nFixes
column not breaking correctly in analyzer. 3 places where this
bug\r\noccured: node details, event details and control panel. Event
details\r\npanel was fixed in
[PR](https://github.com/elastic/kibana/pull/170329).\r\nThis PR covers
the other
two.\r\n\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/e0bf64d2-06f9-42e9-b3fd-d26be1a1a48c)\r\n\r\nAfter\r\n\r\n![image](https://github.com/elastic/kibana/assets/18648970/bb5b3061-6b3b-4701-acf5-cf8db292ef4e)\r\n\r\n###
Checklist\r\n\r\n- [x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"2e52943bc70f49b7b3dab448d839c4af0e636328"}},{"branch":"8.11","label":"v8.11.2","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: christineweng <[email protected]>

x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx

@@ -59,14 +59,14 @@ const StyledGraphControlsColumn = styled.div`
   }
 `;
 
+const COLUMN_WIDTH = ['fit-content(10em)', 'auto'];
+
 const StyledEuiDescriptionListTitle = styled(EuiDescriptionListTitle)`
   text-transform: uppercase;
-  max-width: 25%;
 `;
 
 const StyledEuiDescriptionListDescription = styled(EuiDescriptionListDescription)`
-  min-width: 75%;
-  width: 75%;
+  lineheight: '2.2em'; // lineHeight to align center vertically
 `;
 
 const StyledEuiButtonIcon = styled(EuiButtonIcon)<StyledGraphControlProps>`
@@ -386,52 +386,35 @@ const SchemaInformation = ({
         <StyledDescriptionList
           data-test-subj="resolver:graph-controls:schema-info"
           type="column"
+          columnWidths={COLUMN_WIDTH}
           align="left"
           compressed
         >
           <>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:schema-info:title"
-              style={{ width: '30%' }}
-            >
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
               {i18n.translate('xpack.securitySolution.resolver.graphControls.schemaSource', {
                 defaultMessage: 'source',
               })}
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:schema-info:description"
-              style={{ width: '70%' }}
-            >
+            <EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
               <GeneratedText>{sourceAndSchema?.dataSource ?? unknownSchemaValue}</GeneratedText>
-            </StyledEuiDescriptionListDescription>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:schema-info:title"
-              style={{ width: '30%' }}
-            >
+            </EuiDescriptionListDescription>
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
               {i18n.translate('xpack.securitySolution.resolver.graphControls.schemaID', {
                 defaultMessage: 'id',
               })}
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:schema-info:description"
-              style={{ width: '70%' }}
-            >
+            <EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
               <GeneratedText>{sourceAndSchema?.schema.id ?? unknownSchemaValue}</GeneratedText>
-            </StyledEuiDescriptionListDescription>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:schema-info:title"
-              style={{ width: '30%' }}
-            >
+            </EuiDescriptionListDescription>
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:schema-info:title">
               {i18n.translate('xpack.securitySolution.resolver.graphControls.schemaEdge', {
                 defaultMessage: 'edge',
               })}
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:schema-info:description"
-              style={{ width: '70%' }}
-            >
+            <EuiDescriptionListDescription data-test-subj="resolver:graph-controls:schema-info:description">
               <GeneratedText>{sourceAndSchema?.schema.parent ?? unknownSchemaValue}</GeneratedText>
-            </StyledEuiDescriptionListDescription>
+            </EuiDescriptionListDescription>
           </>
         </StyledDescriptionList>
       </div>
@@ -493,25 +476,20 @@ const NodeLegend = ({
         <StyledDescriptionList
           data-test-subj="resolver:graph-controls:node-legend"
           type="column"
+          columnWidths={COLUMN_WIDTH}
           align="left"
           compressed
         >
           <>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:node-legend:title"
-              style={{ width: '20% ' }}
-            >
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
               <CubeForProcess
                 id={id}
                 size="2.5em"
                 data-test-subj="resolver:node-detail:title-icon"
                 state="running"
               />
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:node-legend:description"
-              style={{ width: '80%', lineHeight: '2.2em' }} // lineHeight to align center vertically
-            >
+            <StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
               <GeneratedText>
                 {i18n.translate(
                   'xpack.securitySolution.resolver.graphControls.runningProcessCube',
@@ -521,21 +499,15 @@ const NodeLegend = ({
                 )}
               </GeneratedText>
             </StyledEuiDescriptionListDescription>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:node-legend:title"
-              style={{ width: '20% ' }}
-            >
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
               <CubeForProcess
                 id={id}
                 size="2.5em"
                 data-test-subj="resolver:node-detail:title-icon"
                 state="terminated"
               />
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:node-legend:description"
-              style={{ width: '80%', lineHeight: '2.2em' }}
-            >
+            <StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
               <GeneratedText>
                 {i18n.translate(
                   'xpack.securitySolution.resolver.graphControls.terminatedProcessCube',
@@ -545,21 +517,15 @@ const NodeLegend = ({
                 )}
               </GeneratedText>
             </StyledEuiDescriptionListDescription>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:node-legend:title"
-              style={{ width: '20% ' }}
-            >
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
               <CubeForProcess
                 id={id}
                 size="2.5em"
                 data-test-subj="resolver:node-detail:title-icon"
                 state="loading"
               />
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:node-legend:description"
-              style={{ width: '80%', lineHeight: '2.2em' }}
-            >
+            <StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
               <GeneratedText>
                 {i18n.translate(
                   'xpack.securitySolution.resolver.graphControls.currentlyLoadingCube',
@@ -569,21 +535,15 @@ const NodeLegend = ({
                 )}
               </GeneratedText>
             </StyledEuiDescriptionListDescription>
-            <StyledEuiDescriptionListTitle
-              data-test-subj="resolver:graph-controls:node-legend:title"
-              style={{ width: '20% ' }}
-            >
+            <StyledEuiDescriptionListTitle data-test-subj="resolver:graph-controls:node-legend:title">
               <CubeForProcess
                 id={id}
                 size="2.5em"
                 data-test-subj="resolver:node-detail:title-icon"
                 state="error"
               />
             </StyledEuiDescriptionListTitle>
-            <StyledEuiDescriptionListDescription
-              data-test-subj="resolver:graph-controls:node-legend:description"
-              style={{ width: '80%', lineHeight: '2.2em' }}
-            >
+            <StyledEuiDescriptionListDescription data-test-subj="resolver:graph-controls:node-legend:description">
               <GeneratedText>
                 {i18n.translate('xpack.securitySolution.resolver.graphControls.errorCube', {
                   defaultMessage: 'Error Process',

x-pack/plugins/security_solution/public/resolver/view/panels/event_detail.tsx

@@ -11,18 +11,11 @@ import React, { memo, useMemo, Fragment } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { EuiBreadcrumb } from '@elastic/eui';
-import {
-  EuiSpacer,
-  EuiText,
-  EuiDescriptionList,
-  EuiHorizontalRule,
-  EuiTextColor,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiHorizontalRule, EuiTextColor, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
 import { useSelector } from 'react-redux';
 import { StyledPanel } from '../styles';
-import { BoldCode, StyledTime } from './styles';
+import { StyledDescriptionList, BoldCode, StyledTime } from './styles';
 import { GeneratedText } from '../generated_text';
 import { CopyablePanelField } from './copyable_panel_field';
 import { Breadcrumbs } from './breadcrumbs';
@@ -329,16 +322,6 @@ function EventDetailBreadcrumbs({
   return <Breadcrumbs breadcrumbs={breadcrumbs} />;
 }
 
-const StyledDescriptionList = memo(styled(EuiDescriptionList)`
-  .euiDescriptionList__title {
-    word-break: normal;
-  }
-  .euiDescriptionList__title,
-  .euiDescriptionList__description {
-    overflow-wrap: break-word;
-  }
-`);
-
 // Also prevents horizontal scrollbars on long descriptive names
 const StyledDescriptiveName = memo(styled(EuiText)`
   padding-right: 1em;

x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx

@@ -35,6 +35,8 @@ const StyledCubeForProcess = styled(CubeForProcess)`
   position: relative;
 `;
 
+const COLUMN_WIDTH = ['fit-content(10em)', 'auto'];
+
 const nodeDetailError = i18n.translate('xpack.securitySolution.resolver.panel.nodeDetail.Error', {
   defaultMessage: 'Node details were unable to be retrieved',
 });
@@ -249,6 +251,7 @@ const NodeDetailView = memo(function ({
       <StyledDescriptionList
         data-test-subj="resolver:node-detail"
         type="column"
+        columnWidths={COLUMN_WIDTH}
         align="left"
         titleProps={
           {

x-pack/plugins/security_solution/public/resolver/view/panels/styles.tsx

@@ -5,16 +5,23 @@
  * 2.0.
  */
 
+import { memo } from 'react';
 import { EuiCode, EuiBreadcrumbs, EuiDescriptionList } from '@elastic/eui';
 
 import styled from 'styled-components';
 
 /**
- * Used by the nodeDetail view to show attributes of the related events.
+ * Used by the nodeDetail view, eventDetail view and control panel to show attributes of the related events.
  */
-export const StyledDescriptionList = styled(EuiDescriptionList).attrs({
-  columnWidths: ['fit-content(10em)', 'auto'], // Sets a max-width of 10em on titles
-})``;
+export const StyledDescriptionList = memo(styled(EuiDescriptionList)`
+  .euiDescriptionList__title {
+    word-break: normal;
+  }
+  .euiDescriptionList__title,
+  .euiDescriptionList__description {
+    overflow-wrap: break-word;
+  }
+`);
 
 /**
  * Used by the nodeDetail view for the label of the node.