From a3991687f2d6bd70d0c34740c24b5f11eff1f81d Mon Sep 17 00:00:00 2001
From: "grafana-delivery-bot[bot]"
 <132647405+grafana-delivery-bot[bot]@users.noreply.github.com>
Date: Thu, 18 Apr 2024 12:33:52 +0200
Subject: [PATCH] [v11.0.x] Select: Increase size of virtualized list options
 (#86502)

---
 packages/grafana-ui/src/components/Select/SelectMenu.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Select/SelectMenu.tsx b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
index 5ed9d32c9b7..c6120d0a0d2 100644
--- a/packages/grafana-ui/src/components/Select/SelectMenu.tsx
+++ b/packages/grafana-ui/src/components/Select/SelectMenu.tsx
@@ -34,7 +34,8 @@ export const SelectMenu = ({ children, maxHeight, innerRef, innerProps }: React.
 SelectMenu.displayName = 'SelectMenu';
 
 const VIRTUAL_LIST_ITEM_HEIGHT = 37;
-const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 7;
+const VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER = 8;
+const VIRTUAL_LIST_PADDING = 8;
 
 // A virtualized version of the SelectMenu, descriptions for SelectableValue options not supported since those are of a variable height.
 //
@@ -57,7 +58,7 @@ export const VirtualizedSelectMenu = ({ children, maxHeight, options, getValue }
   }
 
   const longestOption = max(options.map((option) => option.label?.length)) ?? 0;
-  const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER;
+  const widthEstimate = longestOption * VIRTUAL_LIST_WIDTH_ESTIMATE_MULTIPLIER + VIRTUAL_LIST_PADDING * 2;
   const heightEstimate = Math.min(options.length * VIRTUAL_LIST_ITEM_HEIGHT, maxHeight);
 
   // Try to scroll to keep current value in the middle