From 8c84ac3dc5f0e0bf4bf2b3f39d2fb7dc306d3e0e Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Mon, 19 May 2025 19:33:27 +0530
Subject: [PATCH] chore: Updating the dropdown width for the run behavior
 settings of JS object (#40691)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Updating the dropdown width for the run behavior settings of JS object

Fixes [#40657](https://github.com/appsmithorg/appsmith/issues/40657)

## Automation

/ok-to-test tags="@tag.JS, @tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/15113084468>
> Commit: 8b29ef23202e1ae2c1c0c05012ee2f94ec6a85d2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15113084468&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JS, @tag.IDE`
> Spec:
> <hr>Mon, 19 May 2025 13:26:04 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added an option to control whether the dropdown menu width matches the
select input width, or to set a custom width for dropdown menus.

- **Style**
  - Improved popover content width handling for more consistent display.
- Adjusted minimum width of select input in function settings for a more
compact appearance.
- Dropdown menus in function settings now have a fixed width for better
usability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/packages/design-system/ads/src/Select/Select.tsx  | 2 ++
 .../packages/design-system/ads/src/Select/Select.types.ts    | 1 +
 app/client/src/IDE/Components/ToolbarSettingsPopover.tsx     | 5 +++--
 .../JSEditorToolbar/components/JSFunctionSettings.tsx        | 3 ++-
 4 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/client/packages/design-system/ads/src/Select/Select.tsx b/app/client/packages/design-system/ads/src/Select/Select.tsx
index c99cab9010..49780c5b2f 100644
--- a/app/client/packages/design-system/ads/src/Select/Select.tsx
+++ b/app/client/packages/design-system/ads/src/Select/Select.tsx
@@ -26,6 +26,7 @@ function Select(props: SelectProps) {
     children,
     className,
     dropdownClassName,
+    dropdownMatchSelectWidth = true,
     isDisabled = false,
     isLoading = false,
     isMultiSelect,
@@ -88,6 +89,7 @@ function Select(props: SelectProps) {
         SelectDropdownClassName + `--${size}`,
         dropdownClassName,
       )}
+      dropdownMatchSelectWidth={dropdownMatchSelectWidth}
       dropdownRender={(menu: any) => {
         return (
           <div>
diff --git a/app/client/packages/design-system/ads/src/Select/Select.types.ts b/app/client/packages/design-system/ads/src/Select/Select.types.ts
index 22befed2bc..3905d97162 100644
--- a/app/client/packages/design-system/ads/src/Select/Select.types.ts
+++ b/app/client/packages/design-system/ads/src/Select/Select.types.ts
@@ -11,6 +11,7 @@ export type SelectProps = RCSelectProps & {
   isDisabled?: boolean;
   isValid?: boolean;
   isLoading?: boolean;
+  dropdownMatchSelectWidth?: boolean | number;
 };
 
 export type SelectOptionProps = OptionProps & {
diff --git a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
index d3f9fd6a02..68ce0b54e0 100644
--- a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
+++ b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
@@ -24,8 +24,9 @@ const StyledPopoverHeader = styled(PopoverHeader)`
 `;
 
 const StyledPopoverContent = styled(PopoverContent)<{ popoverWidth?: string }>`
-  --popover-width: ${({ popoverWidth }) =>
-    popoverWidth ? popoverWidth : "280px"};
+  min-width: 280px;
+  max-width: ${({ popoverWidth }) => (popoverWidth ? popoverWidth : "280px")};
+  width: fit-content;
 `;
 
 export const ToolbarSettingsPopover = (props: Props) => {
diff --git a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
index bffd589119..e73db4ee7d 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
@@ -38,7 +38,7 @@ const StyledSelect = styled(Select)`
   width: fit-content;
 
   .rc-select-selector {
-    min-width: 120px;
+    min-width: 110px;
   }
 `;
 
@@ -100,6 +100,7 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
       </FunctionName>
       <StyledSelect
         data-testid={`t--dropdown-runBehaviour`}
+        dropdownMatchSelectWidth={256}
         id={props.action.id}
         isDisabled={props.disabled}
         listHeight={240}