From eaac61534e0a79ac4c5724c40a811194364d11bd Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 29 Oct 2024 11:39:32 -0400
Subject: [PATCH] Fleet UI: Fix host actions dropdown from cutting off last 2
 options (#23335)

---
 .../components/ActionsDropdown/ActionsDropdown.tsx    | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/frontend/components/ActionsDropdown/ActionsDropdown.tsx b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
index 9e068bf735..7de640e415 100644
--- a/frontend/components/ActionsDropdown/ActionsDropdown.tsx
+++ b/frontend/components/ActionsDropdown/ActionsDropdown.tsx
@@ -124,10 +124,6 @@ const ActionsDropdown = ({
   };
 
   const customStyles: StylesConfig<IDropdownOption, false> = {
-    container: (provided) => ({
-      ...provided,
-      width: "80px",
-    }),
     control: (provided, state) => ({
       ...provided,
       display: "flex",
@@ -182,11 +178,10 @@ const ActionsDropdown = ({
       boxShadow: "0 2px 6px rgba(0, 0, 0, 0.1)",
       borderRadius: "4px",
       zIndex: 6,
-      overflow: "hidden",
       border: 0,
       marginTop: 0,
-      minWidth: "158px",
-      maxHeight: "220px",
+      width: "auto",
+      minWidth: "100%",
       position: "absolute",
       left: getLeftMenuAlign(menuAlign),
       right: getRightMenuAlign(menuAlign),
@@ -195,6 +190,7 @@ const ActionsDropdown = ({
     menuList: (provided) => ({
       ...provided,
       padding: PADDING["pad-small"],
+      maxHeight: "initial", // Override react-select default height of 300px to avoid scrollbar on hostactionsdropdown
     }),
     valueContainer: (provided) => ({
       ...provided,
@@ -205,6 +201,7 @@ const ActionsDropdown = ({
       padding: "10px 8px",
       fontSize: "14px",
       backgroundColor: getOptionBackgroundColor(state),
+      whiteSpace: "nowrap",
       "&:hover": {
         backgroundColor: state.isDisabled
           ? "transparent"