From f9567efe8144d60c81839048873d3a0db8e6e6d5 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Wed, 5 May 2021 17:48:48 -0300
Subject: [PATCH] fix: Fix #13831 (#14490)

---
 .../AdhocMetricEditPopover/index.jsx           | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
index ef8a07ca59..d214dc3a58 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx
@@ -23,7 +23,7 @@ import { FormGroup } from 'react-bootstrap';
 import Tabs from 'src/components/Tabs';
 import Button from 'src/components/Button';
 import { NativeSelect as Select } from 'src/components/Select';
-import { t } from '@superset-ui/core';
+import { t, styled } from '@superset-ui/core';
 
 import FormLabel from 'src/components/FormLabel';
 import { SQLEditor } from 'src/components/AsyncAceEditor';
@@ -59,6 +59,18 @@ const defaultProps = {
   getCurrentTab: noOp,
 };
 
+const StyledSelect = styled(Select)`
+  .metric-option {
+    & > svg {
+      min-width: ${({ theme }) => `${theme.gridUnit * 4}px`};
+    }
+    & > .option-label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+`;
+
 export const SAVED_TAB_KEY = 'SAVED';
 
 const startingWidth = 320;
@@ -344,7 +356,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
               <FormLabel>
                 <strong>{t('Saved metric')}</strong>
               </FormLabel>
-              <Select
+              <StyledSelect
                 {...savedSelectProps}
                 name="select-saved"
                 getPopupContainer={triggerNode => triggerNode.parentNode}
@@ -361,7 +373,7 @@ export default class AdhocMetricEditPopover extends React.PureComponent {
                       <StyledMetricOption metric={savedMetric} showType />
                     </Select.Option>
                   ))}
-              </Select>
+              </StyledSelect>
             </FormGroup>
           </Tabs.TabPane>
           <Tabs.TabPane key={EXPRESSION_TYPES.SIMPLE} tab={t('Simple')}>