diff --git a/x-pack/plugins/maps/common/constants.ts b/x-pack/plugins/maps/common/constants.ts
index 06c84a7d062675..456748a3752f13 100644
--- a/x-pack/plugins/maps/common/constants.ts
+++ b/x-pack/plugins/maps/common/constants.ts
@@ -342,3 +342,6 @@ export enum MASK_OPERATOR {
 // Maplibre does not provide any feedback when rendering is complete.
 // Workaround is hard-coded timeout period.
 export const RENDER_TIMEOUT = 1000;
+
+export const MIDDLE_TRUNCATION_PROPS = { truncation: 'middle' as const };
+export const SINGLE_SELECTION_AS_TEXT_PROPS = { asPlainText: true };
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx
index 3de0292292b411..a2c5f69e55e680 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/field_select.tsx
@@ -6,36 +6,18 @@
  */
 
 import React from 'react';
-
-import {
-  EuiComboBox,
-  EuiComboBoxProps,
-  EuiComboBoxOptionOption,
-  EuiHighlight,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
+import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count';
+import { EuiComboBox, EuiComboBoxProps, EuiComboBoxOptionOption } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FieldIcon } from '@kbn/react-field';
-import { FIELD_ORIGIN, VECTOR_STYLES } from '../../../../../common/constants';
+import {
+  FIELD_ORIGIN,
+  MIDDLE_TRUNCATION_PROPS,
+  SINGLE_SELECTION_AS_TEXT_PROPS,
+  VECTOR_STYLES,
+} from '../../../../../common/constants';
 import { StyleField } from '../style_fields_helper';
 
-function renderOption(
-  option: EuiComboBoxOptionOption<StyleField>,
-  searchValue: string,
-  contentClassName: string
-) {
-  const fieldIcon = option.value ? <FieldIcon type={option.value.type} fill="none" /> : null;
-  return (
-    <EuiFlexGroup className={contentClassName} gutterSize="s" alignItems="center">
-      <EuiFlexItem grow={null}>{fieldIcon}</EuiFlexItem>
-      <EuiFlexItem>
-        <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-}
-
 function groupFieldsByOrigin(fields: StyleField[]) {
   const fieldsByOriginMap = new Map<FIELD_ORIGIN, StyleField[]>();
   fields.forEach((field) => {
@@ -56,6 +38,9 @@ function groupFieldsByOrigin(fields: StyleField[]) {
           label: field.label,
           disabled: field.isUnsupported,
           title: field.unsupportedMsg,
+          prepend: field.type ? (
+            <FieldIcon type={field.type} fill="none" className="eui-alignMiddle" />
+          ) : null,
         };
       })
       .sort((a, b) => {
@@ -129,19 +114,24 @@ export function FieldSelect({ fields, selectedFieldName, onChange, styleName, ..
     }
   }
 
+  const options = groupFieldsByOrigin(fields);
+
+  const panelMinWidth = calculateWidthFromEntries(fields, ['label']);
+
   return (
     <EuiComboBox
       selectedOptions={selectedOption ? [selectedOption] : []}
-      options={groupFieldsByOrigin(fields)}
+      options={options}
       onChange={onFieldChange}
-      singleSelection={{ asPlainText: true }}
       isClearable={false}
       fullWidth
       placeholder={i18n.translate('xpack.maps.styles.vector.selectFieldPlaceholder', {
         defaultMessage: 'Select a field',
       })}
-      renderOption={renderOption}
       data-test-subj={`styleFieldSelect_${styleName}`}
+      singleSelection={SINGLE_SELECTION_AS_TEXT_PROPS}
+      truncationProps={MIDDLE_TRUNCATION_PROPS}
+      inputPopoverProps={{ panelMinWidth }}
       {...rest}
     />
   );
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/stop_input.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/stop_input.tsx
index ad7497d97a6e53..d695e605d7b8cb 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/stop_input.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/stop_input.tsx
@@ -8,6 +8,7 @@
 import _ from 'lodash';
 import React, { ChangeEvent, Component } from 'react';
 import { EuiComboBox, EuiComboBoxOptionOption, EuiFieldText } from '@elastic/eui';
+import { SINGLE_SELECTION_AS_TEXT_PROPS } from '../../../../../common/constants';
 import { IField } from '../../../fields/field';
 
 interface Props {
@@ -132,7 +133,7 @@ export class StopInput extends Component<Props, State> {
       <EuiComboBox
         options={suggestionOptions}
         selectedOptions={selectedOptions}
-        singleSelection={{ asPlainText: true }}
+        singleSelection={SINGLE_SELECTION_AS_TEXT_PROPS}
         onChange={this._onChange}
         onSearchChange={this._onSearchChange}
         onCreateOption={this._onCreateOption}
diff --git a/x-pack/plugins/maps/public/components/single_field_select.tsx b/x-pack/plugins/maps/public/components/single_field_select.tsx
index 50bbe6da66a7cf..5a2a8f35755aa6 100644
--- a/x-pack/plugins/maps/public/components/single_field_select.tsx
+++ b/x-pack/plugins/maps/public/components/single_field_select.tsx
@@ -7,22 +7,17 @@
 
 import _ from 'lodash';
 import React from 'react';
-
-import {
-  EuiComboBox,
-  EuiComboBoxProps,
-  EuiComboBoxOptionOption,
-  EuiHighlight,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiToolTip,
-} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { EuiComboBox, EuiComboBoxProps, EuiComboBoxOptionOption, EuiToolTip } from '@elastic/eui';
 import { FieldIcon } from '@kbn/react-field';
 import { DataViewField } from '@kbn/data-views-plugin/public';
+import { calculateWidthFromEntries } from '@kbn/calculate-width-from-char-count';
+import { MIDDLE_TRUNCATION_PROPS } from '../../common/constants';
 
 function fieldsToOptions(
   fields?: DataViewField[],
-  isFieldDisabled?: (field: DataViewField) => boolean
+  isFieldDisabled?: (field: DataViewField) => boolean,
+  getFieldDisabledReason?: (field: DataViewField) => string | null
 ): Array<EuiComboBoxOptionOption<DataViewField>> {
   if (!fields) {
     return [];
@@ -30,12 +25,43 @@ function fieldsToOptions(
 
   return fields
     .map((field) => {
+      const FieldTypeIcon = field.type ? (
+        <FieldIcon type={field.type} fill="none" className="eui-alignMiddle" />
+      ) : null;
       const option: EuiComboBoxOptionOption<DataViewField> = {
         value: field,
         label: field.displayName ? field.displayName : field.name,
+        prepend: FieldTypeIcon,
       };
       if (isFieldDisabled && isFieldDisabled(field)) {
         option.disabled = true;
+
+        const disabledReason =
+          option.disabled && getFieldDisabledReason ? getFieldDisabledReason(option.value!) : null;
+
+        if (disabledReason) {
+          option.prepend = (
+            <>
+              {FieldTypeIcon}
+              <EuiToolTip
+                position="left"
+                content={disabledReason}
+                anchorProps={{
+                  css: css`
+                    position: absolute;
+                    width: 100%;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    right: 0;
+                  `,
+                }}
+              >
+                <div />
+              </EuiToolTip>
+            </>
+          );
+        }
       }
       return option;
     })
@@ -63,34 +89,6 @@ export function SingleFieldSelect({
   value,
   ...rest
 }: Props) {
-  function renderOption(
-    option: EuiComboBoxOptionOption<DataViewField>,
-    searchValue: string,
-    contentClassName: string
-  ) {
-    const content = (
-      <EuiFlexGroup className={contentClassName} gutterSize="s" alignItems="center">
-        <EuiFlexItem grow={null}>
-          <FieldIcon type={option.value!.type} fill="none" />
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiHighlight search={searchValue}>{option.label}</EuiHighlight>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
-
-    const disabledReason =
-      option.disabled && getFieldDisabledReason ? getFieldDisabledReason(option.value!) : null;
-
-    return disabledReason ? (
-      <EuiToolTip position="left" content={disabledReason}>
-        {content}
-      </EuiToolTip>
-    ) : (
-      content
-    );
-  }
-
   const onSelection = (selectedOptions: Array<EuiComboBoxOptionOption<DataViewField>>) => {
     onChange(_.get(selectedOptions, '0.value.name'));
   };
@@ -108,14 +106,19 @@ export function SingleFieldSelect({
     }
   }
 
+  const options = fieldsToOptions(fields, isFieldDisabled, getFieldDisabledReason);
+
+  const panelMinWidth = calculateWidthFromEntries(options, ['label']);
+
   return (
     <EuiComboBox
       singleSelection={true}
-      options={fieldsToOptions(fields, isFieldDisabled)}
+      options={options}
       selectedOptions={selectedOptions}
       onChange={onSelection}
       isDisabled={!fields || fields.length === 0}
-      renderOption={renderOption}
+      truncationProps={MIDDLE_TRUNCATION_PROPS}
+      inputPopoverProps={{ panelMinWidth }}
       {...rest}
     />
   );
diff --git a/x-pack/plugins/maps/tsconfig.json b/x-pack/plugins/maps/tsconfig.json
index 86955eeea584a3..2380d7c3a94256 100644
--- a/x-pack/plugins/maps/tsconfig.json
+++ b/x-pack/plugins/maps/tsconfig.json
@@ -75,6 +75,7 @@
     "@kbn/serverless",
     "@kbn/logging",
     "@kbn/search-response-warnings",
+    "@kbn/calculate-width-from-char-count",
   ],
   "exclude": [
     "target/**/*",