run descriptive name -> GeneratedText too

elastic · Aug 26, 2020 · 0be1d08 · 0be1d08
1 parent 9efb55a
commit 0be1d08
Showing 1 changed file with 15 additions and 7 deletions.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/related_event_detail.tsx
@@ -29,6 +29,12 @@ const StyledDescriptionList = memo(styled(EuiDescriptionList)`
   }
 `);
 
+// Also prevents horizontal scrollbars on long descriptive names
+const StyledDescriptiveName = memo(styled(EuiText)`
+  padding-right: 1em;
+  overflow-wrap: break-word;
+`);
+
 // Styling subtitles, per UX review:
 const StyledFlexTitle = memo(styled('h3')`
   display: flex;
@@ -298,13 +304,15 @@ export const RelatedEventDetail = memo(function RelatedEventDetail({
         </StyledTime>
       </EuiText>
       <EuiSpacer size="m" />
-      <EuiText>
-        <FormattedMessage
-          id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.eventDescriptiveNameInTitle"
-          values={{ subject, descriptor }}
-          defaultMessage="{descriptor} {subject}"
-        />
-      </EuiText>
+      <StyledDescriptiveName>
+        <GeneratedText>
+          <FormattedMessage
+            id="xpack.securitySolution.endpoint.resolver.panel.relatedEventDetail.eventDescriptiveNameInTitle"
+            values={{ subject, descriptor }}
+            defaultMessage="{descriptor} {subject}"
+          />
+        </GeneratedText>
+      </StyledDescriptiveName>
       <EuiSpacer size="l" />
       {sections.map(({ sectionTitle, entries }, index) => {
         const displayEntries = entriesForDisplay(entries);