From 4f21580471aa833ca7e04478548f08044261957f Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Thu, 15 May 2025 19:33:55 +0530
Subject: [PATCH] fix: Updating the styles for JS settings popover (#40660)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Updating the styles for JS settings popover

Fixes #40657

## Automation

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

### :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/15045634120>
> Commit: 0346eec44945dee8b0a98ece911e23f36709c5b2
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=15045634120&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JS`
> Spec:
> <hr>Thu, 15 May 2025 13:49:10 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 the ability to customize the width of the settings popover in
toolbars.

- **Style**
- Improved text wrapping for function names in the function settings
panel.
- Adjusted spacing and set a minimum width for dropdown selectors to
enhance layout consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/IDE/Components/ToolbarSettingsPopover.tsx  | 14 +++++++-------
 .../JSEditor/JSEditorToolbar/JSEditorToolbar.tsx   |  1 +
 .../components/JSFunctionSettings.tsx              | 14 +++++++++++---
 3 files changed, 19 insertions(+), 10 deletions(-)

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}