Merge pull request #12906 from ToolJet/fix/event-action-ui

Fix: Width for the group divider in event action dropdown

frontend/src/AppBuilder/LeftSidebar/GlobalSettings/index.jsx

@@ -10,12 +10,13 @@ import AppModeToggle from './AppModeToggle';
 import { ThemeSelect } from '@/modules/Appbuilder/components';
 import MaintenanceMode from './MaintenanceMode';
 import HideHeaderToggle from './HideHeaderToggle';
+import { ModuleProvider } from '@/AppBuilder/_contexts/ModuleContext';
 
 const GlobalSettings = ({ darkMode }) => {
   const shouldFreeze = useStore((state) => state.getShouldFreeze());
 
   return (
-    <>
+    <ModuleProvider moduleId={'canvas'}>
       <div>
         <div bsPrefix="global-settings-popover" className="global-settings-panel">
           <HeaderSection>
@@ -44,7 +45,7 @@ const GlobalSettings = ({ darkMode }) => {
           </div>
         </div>
       </div>
-    </>
+    </ModuleProvider>
   );
 };
 

frontend/src/AppBuilder/RightSideBar/Inspector/EventManager.jsx

@@ -467,7 +467,7 @@ export const EventManager = ({
     if (data.label === 'run-action') return;
     return (
       <div
-        className="tw-border-x-0 tw-border-t-0 tw-border-b-[0.5px] tw-border-solid tw-my-[4px]"
+        className="tw-border-x-0 tw-border-t-0 tw-border-b-[1px] tw-border-solid tw-my-[4px]"
         style={{ borderColor: 'var(--border-weak)' }}
       ></div>
     );

frontend/src/AppBuilder/WidgetManager/widgets/container.js

@@ -61,6 +61,7 @@ export const containerConfig = {
         top: 20,
         left: 1,
         height: 40,
+        width: 20,
       },
       displayName: 'ContainerText',
       properties: ['text'],

frontend/src/Editor/WidgetManager/configs/container.js

@@ -61,6 +61,7 @@ export const containerConfig = {
         top: 20,
         left: 1,
         height: 40,
+        width: 20,
       },
       displayName: 'ContainerText',
       properties: ['text'],

frontend/src/_hooks/use-portal.jsx

@@ -43,7 +43,7 @@ const usePortal = ({ children, ...restProps }) => {
           isCopilotEnabled={isCopilotEnabled}
         >
           <div
-            className={`editor-container ${optionalProps.cls ?? ''}`}
+            className={`editor-container codehinter-popup ${optionalProps.cls ?? ''}`}
             key={key}
             data-cy={`codehinder-popup-input-field`}
           >

frontend/src/_styles/theme.scss

@@ -18947,6 +18947,14 @@ section.ai-message-prompt-input-wrapper {
   }
 }
 
+.codehinter-popup {
+  .single-line-codehinter-input {
+    .cm-editor {
+      max-height: 100% !important;
+    }
+  }
+}
+
 .missing-groups-modal {
   .modal-body {
     padding: 16px;

server/src/modules/apps/services/widget-config/container.js

@@ -61,6 +61,7 @@ export const containerConfig = {
         top: 20,
         left: 1,
         height: 40,
+        width: 20,
       },
       displayName: 'ContainerText',
       properties: ['text'],