[8.15] [Security Solution] Fix - Unified Timeline Style fixes (#187937)

x-pack/plugins/security_solution/public/timelines/components/timeline/body/events/stateful_row_renderer/index.tsx

@@ -6,7 +6,13 @@
  */
 
 import { noop } from 'lodash/fp';
-import { EuiFocusTrap, EuiOutsideClickDetector, EuiScreenReaderOnly } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFocusTrap,
+  EuiOutsideClickDetector,
+  EuiScreenReaderOnly,
+  EuiFlexItem,
+} from '@elastic/eui';
 import React, { useMemo } from 'react';
 
 import {
@@ -73,13 +79,15 @@ export const StatefulRowRenderer = ({
               <EuiScreenReaderOnly data-test-subj="eventRendererScreenReaderOnly">
                 <p>{i18n.YOU_ARE_IN_AN_EVENT_RENDERER(ariaRowindex)}</p>
               </EuiScreenReaderOnly>
-              <div onKeyDown={onKeyDown}>
-                {rowRenderer.renderRow({
-                  data: event.ecs,
-                  isDraggable: true,
-                  scopeId: timelineId,
-                })}
-              </div>
+              <EuiFlexGroup direction="column" onKeyDown={onKeyDown}>
+                <EuiFlexItem grow={true}>
+                  {rowRenderer.renderRow({
+                    data: event.ecs,
+                    isDraggable: true,
+                    scopeId: timelineId,
+                  })}
+                </EuiFlexItem>
+              </EuiFlexGroup>
             </EuiFocusTrap>
           </EuiOutsideClickDetector>
         </div>

x-pack/plugins/security_solution/public/timelines/components/timeline/body/unified_timeline_body.tsx

@@ -9,7 +9,7 @@ import type { ComponentProps, ReactElement } from 'react';
 import React, { useEffect, useState, useMemo } from 'react';
 import { RootDragDropProvider } from '@kbn/dom-drag-drop';
 import { isEmpty } from 'lodash';
-import { StyledTableFlexGroup, StyledTableFlexItem } from '../unified_components/styles';
+import { StyledTableFlexGroup, StyledUnifiedTableFlexItem } from '../unified_components/styles';
 import { UnifiedTimeline } from '../unified_components';
 import { defaultUdtHeaders } from '../unified_components/default_headers';
 import type { PaginationInputPaginated, TimelineItem } from '../../../../../common/search_strategy';
@@ -65,8 +65,11 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
 
   return (
     <StyledTableFlexGroup direction="column" gutterSize="s">
-      <StyledTableFlexItem grow={false}>{header}</StyledTableFlexItem>
-      <StyledTableFlexItem className="unifiedTimelineBody" data-test-subj="unifiedTimelineBody">
+      <StyledUnifiedTableFlexItem grow={false}>{header}</StyledUnifiedTableFlexItem>
+      <StyledUnifiedTableFlexItem
+        className="unifiedTimelineBody"
+        data-test-subj="unifiedTimelineBody"
+      >
         <RootDragDropProvider>
           <UnifiedTimeline
             columns={columnsHeader}
@@ -91,7 +94,7 @@ export const UnifiedTimelineBody = (props: UnifiedTimelineBodyProps) => {
             leadingControlColumns={leadingControlColumns}
           />
         </RootDragDropProvider>
-      </StyledTableFlexItem>
+      </StyledUnifiedTableFlexItem>
     </StyledTableFlexGroup>
   );
 };

x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx

@@ -285,31 +285,29 @@ export const EqlTabContentComponent: React.FC<Props> = ({
           </InPortal>
           {NotesFlyoutMemo}
           <FullWidthFlexGroup>
-            <ScrollableFlexItem grow={2}>
-              <UnifiedTimelineBody
-                header={unifiedHeader}
-                columns={augmentedColumnHeaders}
-                isSortEnabled={false}
-                rowRenderers={rowRenderers}
-                timelineId={timelineId}
-                itemsPerPage={itemsPerPage}
-                itemsPerPageOptions={itemsPerPageOptions}
-                sort={TIMELINE_NO_SORTING}
-                events={events}
-                refetch={refetch}
-                dataLoadingState={dataLoadingState}
-                totalCount={isBlankTimeline ? 0 : totalCount}
-                onEventClosed={onEventClosed}
-                expandedDetail={expandedDetail}
-                showExpandedDetails={showExpandedDetails}
-                onChangePage={loadPage}
-                activeTab={activeTab}
-                updatedAt={refreshedAt}
-                isTextBasedQuery={false}
-                pageInfo={pageInfo}
-                leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
-              />
-            </ScrollableFlexItem>
+            <UnifiedTimelineBody
+              header={unifiedHeader}
+              columns={augmentedColumnHeaders}
+              isSortEnabled={false}
+              rowRenderers={rowRenderers}
+              timelineId={timelineId}
+              itemsPerPage={itemsPerPage}
+              itemsPerPageOptions={itemsPerPageOptions}
+              sort={TIMELINE_NO_SORTING}
+              events={events}
+              refetch={refetch}
+              dataLoadingState={dataLoadingState}
+              totalCount={isBlankTimeline ? 0 : totalCount}
+              onEventClosed={onEventClosed}
+              expandedDetail={expandedDetail}
+              showExpandedDetails={showExpandedDetails}
+              onChangePage={loadPage}
+              activeTab={activeTab}
+              updatedAt={refreshedAt}
+              isTextBasedQuery={false}
+              pageInfo={pageInfo}
+              leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
+            />
           </FullWidthFlexGroup>
         </>
       ) : (
@@ -325,14 +323,9 @@ export const EqlTabContentComponent: React.FC<Props> = ({
             loading={isQueryLoading}
             refetch={refetch}
           />
-          <FullWidthFlexGroup>
-            <ScrollableFlexItem grow={2}>
-              <EqlTabHeader
-                activeTab={activeTab}
-                setTimelineFullScreen={setTimelineFullScreen}
-                timelineFullScreen={timelineFullScreen}
-                timelineId={timelineId}
-              />
+          <FullWidthFlexGroup gutterSize="s" direction="column">
+            <ScrollableFlexItem grow={false}>{unifiedHeader}</ScrollableFlexItem>
+            <ScrollableFlexItem grow={true}>
               <EventDetailsWidthProvider>
                 <StyledEuiFlyoutBody
                   data-test-subj={`${TimelineTabs.eql}-tab-flyout-body`}

x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/shared/layout.tsx

@@ -16,7 +16,6 @@ import {
 import styled from 'styled-components';
 
 export const TabHeaderContainer = styled.div`
-  margin-top: ${(props) => props.theme.eui.euiSizeS};
   width: 100%;
 `;
 

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/data_table/custom_timeline_data_grid_body.tsx

@@ -185,7 +185,7 @@ const CustomDataGridSingleRow = memo(function CustomDataGridSingleRow(
 
   return (
     <CustomGridRow
-      className={`${rowIndex % 2 === 0 ? 'euiDataGridRow--striped' : ''}`}
+      className={`${rowIndex % 2 !== 0 ? 'euiDataGridRow--striped' : ''}`}
       $cssRowHeight={cssRowHeight}
       key={rowIndex}
     >

x-pack/plugins/security_solution/public/timelines/components/timeline/unified_components/styles.tsx

@@ -22,7 +22,7 @@ export const StyledTableFlexGroup = styled(EuiFlexGroup).attrs(({ className = ''
   }
 `;
 
-export const StyledTableFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
+export const StyledUnifiedTableFlexItem = styled(EuiFlexItem).attrs(({ className = '' }) => ({
   className: `${className}`,
 }))`
   ${({ theme }) => `margin: 0 ${theme.eui.euiSizeM};`}