diff --git a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
index 3a2e8d2666..d3f9fd6a02 100644
--- a/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
+++ b/app/client/src/IDE/Components/ToolbarSettingsPopover.tsx
@@ -7,7 +7,7 @@ import {
   PopoverTrigger,
   ToggleButton,
 } from "@appsmith/ads";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 interface Props {
   isOpen: boolean;
@@ -16,21 +16,20 @@ interface Props {
   children: React.ReactNode;
   dataTestId?: string;
   disabled?: boolean;
+  popoverWidth?: string;
 }
 
-const Variables = css`
-  --popover-width: 280px;
-`;
 const StyledPopoverHeader = styled(PopoverHeader)`
   margin-bottom: var(--ads-v2-spaces-5);
 `;
 
-const StyledPopoverContent = styled(PopoverContent)`
-  ${Variables};
+const StyledPopoverContent = styled(PopoverContent)<{ popoverWidth?: string }>`
+  --popover-width: ${({ popoverWidth }) =>
+    popoverWidth ? popoverWidth : "280px"};
 `;
 
 export const ToolbarSettingsPopover = (props: Props) => {
-  const { handleOpenChange, isOpen, title } = props;
+  const { handleOpenChange, isOpen, popoverWidth, title } = props;
   const handleButtonClick = useCallback(() => {
     handleOpenChange(true);
   }, [handleOpenChange]);
@@ -54,6 +53,7 @@ export const ToolbarSettingsPopover = (props: Props) => {
       <StyledPopoverContent
         align="end"
         onEscapeKeyDown={handleEscapeKeyDown}
+        popoverWidth={popoverWidth}
         size="sm"
       >
         <StyledPopoverHeader isClosable>{title}</StyledPopoverHeader>
diff --git a/app/client/src/ce/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx b/app/client/src/ce/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
index 8357b14813..54bed87617 100644
--- a/app/client/src/ce/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
+++ b/app/client/src/ce/pages/Editor/JSEditor/JSEditorToolbar/JSEditorToolbar.tsx
@@ -75,6 +75,7 @@ export const JSEditorToolbar = (props: Props) => {
             dataTestId={"t--js-settings-trigger"}
             handleOpenChange={setIsOpen}
             isOpen={isOpen}
+            popoverWidth="345px"
             title={createMessage(JS_EDITOR_SETTINGS.TITLE)}
           >
             <JSFunctionSettings
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 ea180c9b02..c54a9a3e4c 100644
--- a/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
+++ b/app/client/src/pages/Editor/JSEditor/JSEditorToolbar/components/JSFunctionSettings.tsx
@@ -33,6 +33,14 @@ const OptionSubText = styled(Text)`
 
 const StyledSelect = styled(Select)`
   width: fit-content;
+
+  .rc-select-selector {
+    min-width: 120px;
+  }
+`;
+
+const FunctionName = styled(Text)`
+  word-break: break-all;
 `;
 
 interface Props {
@@ -71,15 +79,15 @@ const FunctionSettingRow = (props: FunctionSettingsRowProps) => {
     <Flex
       alignItems="center"
       className={`t--async-js-function-settings ${props.action.name}-run-behavior-setting`}
-      gap="spaces-4"
+      gap="spaces-3"
       id={`${props.action.name}-settings`}
       justifyContent="space-between"
       key={props.action.id}
       w="100%"
     >
-      <Text htmlFor={props.action.id} renderAs="label">
+      <FunctionName htmlFor={props.action.id} renderAs="label">
         {props.action.name}
-      </Text>
+      </FunctionName>
       <StyledSelect
         data-testid={`t--dropdown-runBehaviour`}
         defaultValue={selectedValue}