From fa99ad8d20301240a65260cdefd8e230e268b4fd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 17 Apr 2024 22:17:16 -0700
Subject: [PATCH] [APM][Services] Fix overview tables custom CSS

- `:first-child` CSS no longer works well since `EuiBasicTable` no longer adds a `<div>` wrapper around the `<table>`

+ additionally fix Errors table to align the pagination bar to the bottom, like the Transactions and Dependencies tables
---
 .../service_overview_errors_table/index.tsx     | 17 ++++++++++-------
 .../shared/overview_table_container/index.tsx   |  5 +++--
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
index fd77708d306c7..a630cb7a2bc60 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -9,6 +9,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useApmParams } from '../../../../hooks/use_apm_params';
+import { OverviewTableContainer } from '../../../shared/overview_table_container';
 import { ErrorOverviewLink } from '../../../shared/links/apm/error_overview_link';
 import { ErrorGroupList } from '../../error_group_overview/error_group_list';
 
@@ -42,13 +43,15 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <ErrorGroupList
-          serviceName={serviceName}
-          initialPageSize={5}
-          isCompactMode={true}
-          saveTableOptionsToUrl={false}
-          showPerPageOptions={false}
-        />
+        <OverviewTableContainer fixedHeight={true} isEmptyAndNotInitiated={false}>
+          <ErrorGroupList
+            serviceName={serviceName}
+            initialPageSize={5}
+            isCompactMode={true}
+            saveTableOptionsToUrl={false}
+            showPerPageOptions={false}
+          />
+        </OverviewTableContainer>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx
index 0974b4ee63287..c77c3e7cc7a92 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx
@@ -42,8 +42,9 @@ const OverviewTableContainerDiv = euiStyled.div<{
     flex-direction: column;
     flex-grow: 1;
 
-    > :first-child {
-      flex-grow: 1;
+    /* Align the pagination to the bottom of the card */
+    > :last-child {
+      margin-top: auto;
     }
   `}