From 70d1b261e8009c1e98ad25d36a57e96e7f384def Mon Sep 17 00:00:00 2001
From: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
Date: Mon, 16 Oct 2023 12:55:48 +0100
Subject: [PATCH] [ObsUX] Fix layout in KeyValueFilterList component (#168814)

Closes https://github.com/elastic/kibana/issues/168129

### What was done

There was a change in `EuiDescriptionList` this component was updated to
use CSS grid, and was the cause of the misalignment, it's been fixed
with the new prop `columnWidths`
Also, the grid was creating a gap between the borders of the title and
description of the list item.
After checking with @boriskirov, we decided to get rid of the border.

BEFORE


![image](https://github.com/elastic/kibana/assets/31922082/fa2fbf54-08b8-4425-b834-504f2c0d7753)

AFTER


![image](https://github.com/elastic/kibana/assets/31922082/03356522-08aa-474e-a3dd-b39eaf19ec25)
---
 .../components/shared/key_value_filter_list/index.tsx      | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx b/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
index 20ab03e42025b..14911f7e3b7a8 100644
--- a/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
@@ -39,7 +39,6 @@ const StyledEuiDescriptionList = styled(EuiDescriptionList)`
     `${theme.eui.euiSizeS} ${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS}`};
   .descriptionList__title,
   .descriptionList__description {
-    border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
     margin-top: 0;
     align-items: center;
     display: flex;
@@ -74,13 +73,13 @@ export function KeyValueFilterList({
       buttonContent={<AccordionButtonContent icon={icon} title={title} />}
       buttonClassName="buttonContentContainer"
     >
-      <StyledEuiDescriptionList type="column">
+      <StyledEuiDescriptionList type="column" columnWidths={['20%', '80%']}>
         {nonEmptyKeyValueList.map(({ key, value, isFilterable }) => {
           return (
             <Fragment key={key}>
               <EuiDescriptionListTitle
                 className="descriptionList__title"
-                style={{ width: '20%', height: '40px' }}
+                style={{ height: '40px' }}
               >
                 <EuiText size="s" style={{ fontWeight: 'bold' }}>
                   {key}
@@ -88,7 +87,7 @@ export function KeyValueFilterList({
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription
                 className="descriptionList__description"
-                style={{ width: '80%', height: '40px' }}
+                style={{ height: '40px' }}
               >
                 <EuiFlexGroup
                   alignItems="baseline"