caculate dynamic height

elastic · Dec 30, 2020 · 71d306c · 71d306c
1 parent 4b17ee9
commit 71d306c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 15 deletions.
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -51,7 +51,6 @@ const StyledEuiTabbedContent = styled(EuiTabbedContent)`
 const TabContentWrapper = styled.div`
   height: 100%;
   position: relative;
-  margin-bottom: 48px;
 `;
 
 const EventDetailsComponent: React.FC<Props> = ({

diff --git a/...plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx b/...plugins/security_solution/public/timelines/components/timeline/expandable_event/index.tsx
@@ -17,7 +17,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
 import { TimelineExpandedEventType, TimelineTabs } from '../../../../../common/types/timeline';
@@ -38,6 +38,7 @@ interface Props {
   event: TimelineExpandedEventType;
   isAlert: boolean;
   loading: boolean;
+  messageHeight?: number;
   timelineTabType: TimelineTabs | 'flyout';
   timelineId: string;
 }
@@ -55,11 +56,10 @@ const StyledEuiFlexGroup = styled(EuiFlexGroup)`
 const StyledFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
-
-const StyledEuiFlexItem = styled(EuiFlexItem)`
-  max-height: 100%;
-  padding-bottom: 48px;
-  box-sizing: border-box;
+const TabListHeight = 48;
+const StyledEuiFlexItem = styled(EuiFlexItem)<{ $tabListHeight?: number; $messageHeight?: number }>`
+  ${({ $tabListHeight = TabListHeight, $messageHeight = 0 }) =>
+    `max-height: calc(100% - ${$tabListHeight}px - ${$messageHeight}px);`}
 `;
 
 export const ExpandableEventTitle = React.memo<ExpandableEventTitleProps>(
@@ -100,6 +100,8 @@ export const ExpandableEvent = React.memo<Props>(
       return null;
     }, [detailsData]);
 
+    const messageRef = useRef<HTMLDivElement>(null);
+
     if (!event.eventId) {
       return <EuiTextColor color="subdued">{i18n.EVENT_DETAILS_PLACEHOLDER}</EuiTextColor>;
     }
@@ -112,16 +114,18 @@ export const ExpandableEvent = React.memo<Props>(
       <StyledFlexGroup direction="column" gutterSize="none">
         {message && (
           <EuiFlexItem grow={false}>
-            <EuiDescriptionList data-test-subj="event-message" compressed>
-              <EuiDescriptionListTitle>{i18n.MESSAGE}</EuiDescriptionListTitle>
-              <EuiDescriptionListDescription>
-                <LineClamp content={message} />
-              </EuiDescriptionListDescription>
-            </EuiDescriptionList>
-            <EuiSpacer size="m" />
+            <div ref={messageRef}>
+              <EuiDescriptionList data-test-subj="event-message" compressed>
+                <EuiDescriptionListTitle>{i18n.MESSAGE}</EuiDescriptionListTitle>
+                <EuiDescriptionListDescription>
+                  <LineClamp content={message} />
+                </EuiDescriptionListDescription>
+              </EuiDescriptionList>
+              <EuiSpacer size="m" />
+            </div>
           </EuiFlexItem>
         )}
-        <StyledEuiFlexItem grow={true}>
+        <StyledEuiFlexItem grow={true} $messageHeight={messageRef?.current?.clientHeight}>
           <EventDetails
             browserFields={browserFields}
             data={detailsData!}