From fae1208b5ddd3dfaa2780f97085466a562f4fd97 Mon Sep 17 00:00:00 2001
From: Nikita Indik <nikita.indik@elastic.co>
Date: Fri, 6 Dec 2024 16:18:54 +0100
Subject: [PATCH] Set `min-width` for the VersionsPicker component

---
 .../comparison_side/versions_picker/versions_picker.tsx   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx
index 814346a38545b..919bc53c37303 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/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,6 +37,7 @@ export function VersionsPicker({
 
   return (
     <EuiSelect
+      className={VERSIONS_PICKER_STYLES}
       options={options}
       value={selectedVersions}
       onChange={handleChange}
@@ -43,3 +45,9 @@ export function VersionsPicker({
     />
   );
 }
+
+const VERSIONS_PICKER_STYLES = css`
+  // Set min-width a bit wider than default
+  // to make English text in narrow screens readable
+  min-width: 220px;
+`;