diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
index ed16c4579..b7d5c0dde 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Filter popover component renders filter popover 1`] = `
   <div
     style={
       Object {
-        "width": 500,
+        "width": 600,
       }
     }
   >
@@ -44,28 +44,29 @@ exports[`Filter popover component renders filter popover 1`] = `
       }
     />
     <EuiFlexGroup
-      gutterSize="s"
+      direction="column"
+      gutterSize="m"
     >
       <div
-        className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionColumn euiFlexGroup--responsive"
       >
         <EuiFlexItem
-          grow={6}
+          grow={true}
         >
           <div
-            className="euiFlexItem euiFlexItem--flexGrow6"
+            className="euiFlexItem"
           >
             <EuiCompressedFormRow
               describedByIds={Array []}
               display="rowCompressed"
-              fullWidth={false}
+              fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
               label="Field"
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -92,7 +93,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                     async={false}
                     compressed={true}
                     data-test-subj="field-selector-filter-panel"
-                    fullWidth={false}
+                    fullWidth={true}
                     id="random_html_id"
                     isClearable={false}
                     onBlur={[Function]}
@@ -129,7 +130,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                     <div
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox euiComboBox--compressed"
+                      className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
                       data-test-subj="field-selector-filter-panel"
                       onKeyDown={[Function]}
                       role="combobox"
@@ -137,7 +138,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
                         compressed={true}
-                        fullWidth={false}
+                        fullWidth={true}
                         hasSelectedOptions={false}
                         id="random_html_id"
                         inputRef={[Function]}
@@ -164,7 +165,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       >
                         <EuiFormControlLayout
                           compressed={true}
-                          fullWidth={false}
+                          fullWidth={true}
                           icon={
                             Object {
                               "aria-label": "Open list of options",
@@ -178,13 +179,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                           }
                         >
                           <div
-                            className="euiFormControlLayout euiFormControlLayout--compressed"
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
@@ -332,22 +333,22 @@ exports[`Filter popover component renders filter popover 1`] = `
           </div>
         </EuiFlexItem>
         <EuiFlexItem
-          grow={5}
+          grow={true}
         >
           <div
-            className="euiFlexItem euiFlexItem--flexGrow5"
+            className="euiFlexItem"
           >
             <EuiCompressedFormRow
               describedByIds={Array []}
               display="rowCompressed"
-              fullWidth={false}
+              fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
               label="Operator"
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -374,7 +375,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                     async={false}
                     compressed={true}
                     data-test-subj="operator-selector-filter-panel"
-                    fullWidth={false}
+                    fullWidth={true}
                     id="random_html_id"
                     isClearable={false}
                     isDisabled={true}
@@ -394,7 +395,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                     <div
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
+                      className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth euiComboBox-isDisabled"
                       data-test-subj="operator-selector-filter-panel"
                       onKeyDown={[Function]}
                       role="combobox"
@@ -402,7 +403,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
                         compressed={true}
-                        fullWidth={false}
+                        fullWidth={true}
                         hasSelectedOptions={false}
                         id="random_html_id"
                         inputRef={[Function]}
@@ -430,7 +431,7 @@ exports[`Filter popover component renders filter popover 1`] = `
                       >
                         <EuiFormControlLayout
                           compressed={true}
-                          fullWidth={false}
+                          fullWidth={true}
                           icon={
                             Object {
                               "aria-label": "Open list of options",
@@ -444,13 +445,13 @@ exports[`Filter popover component renders filter popover 1`] = `
                           }
                         >
                           <div
-                            className="euiFormControlLayout euiFormControlLayout--compressed"
+                            className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
diff --git a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
index 064bc81b9..2e6169b86 100644
--- a/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
+++ b/public/components/trace_analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
@@ -134,89 +134,99 @@ Array [
       className="euiSpacer euiSpacer--s"
     />
   </EuiSpacer>,
-  <EuiCompressedFormRow
-    describedByIds={Array []}
-    display="rowCompressed"
-    fullWidth={false}
-    hasChildLabel={true}
-    hasEmptyLabelSpace={false}
-    label="Value"
-    labelType="label"
+  <EuiFlexItem
+    grow={true}
   >
     <div
-      className="euiFormRow euiFormRow--compressed"
-      id="random_html_id-row"
+      className="euiFlexItem"
     >
-      <div
-        className="euiFormRow__labelWrapper"
+      <EuiCompressedFormRow
+        describedByIds={Array []}
+        display="rowCompressed"
+        fullWidth={true}
+        hasChildLabel={true}
+        hasEmptyLabelSpace={false}
+        label="Value"
+        labelType="label"
       >
-        <EuiFormLabel
-          className="euiFormRow__label"
-          htmlFor="random_html_id"
-          isFocused={false}
-          type="label"
+        <div
+          className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
+          id="random_html_id-row"
         >
-          <label
-            className="euiFormLabel euiFormRow__label"
-            htmlFor="random_html_id"
+          <div
+            className="euiFormRow__labelWrapper"
           >
-            Value
-          </label>
-        </EuiFormLabel>
-      </div>
-      <div
-        className="euiFormRow__fieldWrapper"
-      >
-        <EuiCompressedFieldText
-          id="random_html_id"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          placeholder="Enter a value"
-          value={0}
-        >
-          <EuiFieldText
-            compressed={true}
-            id="random_html_id"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            placeholder="Enter a value"
-            value={0}
+            <EuiFormLabel
+              className="euiFormRow__label"
+              htmlFor="random_html_id"
+              isFocused={false}
+              type="label"
+            >
+              <label
+                className="euiFormLabel euiFormRow__label"
+                htmlFor="random_html_id"
+              >
+                Value
+              </label>
+            </EuiFormLabel>
+          </div>
+          <div
+            className="euiFormRow__fieldWrapper"
           >
-            <EuiFormControlLayout
-              compressed={true}
-              fullWidth={false}
-              inputId="random_html_id"
+            <EuiCompressedFieldText
+              fullWidth={true}
+              id="random_html_id"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              placeholder="Enter a value"
+              value={0}
             >
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
+              <EuiFieldText
+                compressed={true}
+                fullWidth={true}
+                id="random_html_id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                placeholder="Enter a value"
+                value={0}
               >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
+                <EuiFormControlLayout
+                  compressed={true}
+                  fullWidth={true}
+                  inputId="random_html_id"
                 >
-                  <EuiValidatableControl>
-                    <input
-                      className="euiFieldText euiFieldText--compressed"
-                      id="random_html_id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      placeholder="Enter a value"
-                      type="text"
-                      value={0}
-                    />
-                  </EuiValidatableControl>
-                  <EuiFormControlLayoutIcons
-                    compressed={true}
-                  />
-                </div>
-              </div>
-            </EuiFormControlLayout>
-          </EuiFieldText>
-        </EuiCompressedFieldText>
-      </div>
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <EuiValidatableControl>
+                        <input
+                          className="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
+                          id="random_html_id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          placeholder="Enter a value"
+                          type="text"
+                          value={0}
+                        />
+                      </EuiValidatableControl>
+                      <EuiFormControlLayoutIcons
+                        compressed={true}
+                      />
+                    </div>
+                  </div>
+                </EuiFormControlLayout>
+              </EuiFieldText>
+            </EuiCompressedFieldText>
+          </div>
+        </div>
+      </EuiCompressedFormRow>
     </div>
-  </EuiCompressedFormRow>,
+  </EuiFlexItem>,
 ]
 `;
diff --git a/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
index 22b97b68a..04b2675c3 100644
--- a/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
+++ b/public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
@@ -37,12 +37,12 @@ export function FilterEditPopover(props: {
   const [filterValue, setFilterValue] = useState(props.filter?.value || '');
 
   return (
-    <div style={{ width: 500 }}>
+    <div style={{ width: 600 }}>
       {/* invisible button workaround to prevent auto focus on context menu panel switch */}
       <button style={{ width: 0, height: 0, position: 'fixed', marginLeft: -1000, bottom: 0 }} />
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem grow={6}>
-          <EuiCompressedFormRow label={'Field'}>
+      <EuiFlexGroup gutterSize="m" direction="column">
+        <EuiFlexItem grow={true}>
+          <EuiCompressedFormRow label={'Field'} fullWidth>
             <EuiCompressedComboBox
               placeholder="Select a field first"
               data-test-subj="field-selector-filter-panel"
@@ -55,11 +55,12 @@ export function FilterEditPopover(props: {
                 setFilterValue('');
               }}
               singleSelection={{ asPlainText: true }}
+              fullWidth
             />
           </EuiCompressedFormRow>
         </EuiFlexItem>
-        <EuiFlexItem grow={5}>
-          <EuiCompressedFormRow label={'Operator'}>
+        <EuiFlexItem grow={true}>
+          <EuiCompressedFormRow label={'Operator'} fullWidth>
             <EuiCompressedComboBox
               placeholder={selectedFieldOptions.length === 0 ? 'Waiting' : 'Select'}
               data-test-subj="operator-selector-filter-panel"
@@ -76,6 +77,7 @@ export function FilterEditPopover(props: {
                 setFilterValue('');
               }}
               singleSelection={{ asPlainText: true }}
+              fullWidth
             />
           </EuiCompressedFormRow>
         </EuiFlexItem>
diff --git a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
index 663400302..fc0822521 100644
--- a/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
+++ b/public/components/trace_analytics/components/common/filters/filter_helpers.tsx
@@ -7,6 +7,7 @@ import {
   EuiCompressedComboBox,
   EuiCompressedFieldText,
   EuiCompressedFormRow,
+  EuiFlexItem,
   EuiFormControlLayoutDelimited,
   EuiSpacer,
 } from '@elastic/eui';
@@ -157,13 +158,16 @@ export const getValueComponent = (
   const textField = (
     <>
       <EuiSpacer size="s" />
-      <EuiCompressedFormRow label={'Value'}>
-        <EuiCompressedFieldText
-          placeholder="Enter a value"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-        />
-      </EuiCompressedFormRow>
+      <EuiFlexItem grow={true}>
+        <EuiCompressedFormRow label={'Value'} fullWidth>
+          <EuiCompressedFieldText
+            placeholder="Enter a value"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            fullWidth
+          />
+        </EuiCompressedFormRow>
+      </EuiFlexItem>
     </>
   );
 
diff --git a/public/components/trace_analytics/components/common/filters/filters.tsx b/public/components/trace_analytics/components/common/filters/filters.tsx
index ddb0511ea..af7414469 100644
--- a/public/components/trace_analytics/components/common/filters/filters.tsx
+++ b/public/components/trace_analytics/components/common/filters/filters.tsx
@@ -106,7 +106,7 @@ export function Filters(props: FiltersOwnProps) {
     },
     {
       id: 1,
-      width: 530,
+      width: 630,
       title: 'Edit filter',
       content: (
         <div style={{ margin: 15 }}>
@@ -228,7 +228,7 @@ export function Filters(props: FiltersOwnProps) {
   return props.filters.length > 0 ? (
     <>
       <EuiSpacer size="s" />
-      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false} wrap>
         {filterComponents}
         <EuiFlexItem grow={false}>
           <AddFilterButton />
@@ -353,7 +353,7 @@ export const GlobalFilterButton = ({
     {
       id: 1,
       title: 'Add filter',
-      width: 530,
+      width: 630,
       content: (
         <div style={{ margin: 15 }}>
           <FilterEditPopover
diff --git a/public/components/trace_analytics/index.scss b/public/components/trace_analytics/index.scss
index a30f4b907..8d6701666 100644
--- a/public/components/trace_analytics/index.scss
+++ b/public/components/trace_analytics/index.scss
@@ -148,8 +148,8 @@ th[data-test-subj^='tableHeaderCell_dashboard_latency_variance'] {
 }
 
 .ellipsis-left {
-  direction: rtl;
-  unicode-bidi: bidi-override;
+  direction: rtl; 
+  unicode-bidi: plaintext;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;