[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
elastic · Apr 18, 2024 · fa99ad8 · fa99ad8
1 parent c48425e
commit fa99ad8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/...lution/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/...lution/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/...ns/observability_solution/apm/public/components/shared/overview_table_container/index.tsx b/...ns/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;
     }
   `}