Set min-width for the VersionsPicker component

elastic · Dec 6, 2024 · fae1208 · fae1208
1 parent b4b066b
commit fae1208
Showing 1 changed file with 8 additions and 0 deletions.
diff --git a/...omponents/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx b/...omponents/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx
@@ -7,6 +7,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 import { EuiSelect } from '@elastic/eui';
+import { css } from '@emotion/css';
 import type { EuiSelectOption } from '@elastic/eui';
 import { BASE_OPTIONS, CURRENT_OPTIONS, TARGET_OPTIONS, SelectedVersions } from './constants';
 import * as i18n from './translations';
@@ -36,10 +37,17 @@ export function VersionsPicker({
 
   return (
     <EuiSelect
+      className={VERSIONS_PICKER_STYLES}
       options={options}
       value={selectedVersions}
       onChange={handleChange}
       aria-label={i18n.VERSION_PICKER_ARIA_LABEL}
     />
   );
 }
+
+const VERSIONS_PICKER_STYLES = css`
+  // Set min-width a bit wider than default
+  // to make English text in narrow screens readable
+  min-width: 220px;
+`;