From f526f7d3214cc387be7e217fea9300551425b7a8 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Wed, 27 Nov 2024 09:08:19 +0530
Subject: [PATCH] feat: center align action forms

---
 .../components/ActionForm/Zone/styles.module.css          | 5 +++++
 .../components/UQIEditor/UQIEditorForm.tsx                | 8 +++++++-
 .../editorComponents/form/fields/StyledFormComponents.tsx | 7 ++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css
index 0af35a6d69c7..9f616da7c93b 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/ActionForm/Zone/styles.module.css
@@ -67,5 +67,10 @@
   & :global(.ads-v2-select > .rc-select-selector) {
     min-width: unset;
   }
+
+  /* Remove this once the config in DB is updated to use Section and Zone (Twilio, Airtable) */
+  & :global(.ar-form-info-text) {
+    max-width: unset;
+  }
   /* Removable section ends here */
 }
diff --git a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
index 44750c91be8a..1e7537d79b2d 100644
--- a/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
+++ b/app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx
@@ -22,7 +22,13 @@ const UQIEditorForm = () => {
   const { data, evaluationState } = useFormData();
 
   return (
-    <Flex flexDirection="column" overflowY="scroll" w="100%">
+    <Flex
+      alignItems="center"
+      flexDirection="column"
+      id="uqi-editor-form-content"
+      overflowY="scroll"
+      w="100%"
+    >
       <FormRender
         editorConfig={editorConfig}
         formData={data}
diff --git a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx b/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
index c8e638796926..193d727addea 100644
--- a/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
+++ b/app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
@@ -32,6 +32,9 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
       ? "5px"
       : "0px"};
   line-height: 16px;
+  max-width: 270px;
+  overflow: hidden;
+  break-word: break-all;
 `;
 
 const FormSubtitleText = styled.span<{ config?: ControlProps }>`
@@ -177,7 +180,9 @@ function FormLabel(props: FormLabelProps) {
 //Wrapper on styled <span/>
 function FormInfoText(props: FormLabelProps) {
   return (
-    <StyledFormInfo config={props.config}>{props.children}</StyledFormInfo>
+    <StyledFormInfo className="ar-form-info-text" config={props.config}>
+      {props.children}
+    </StyledFormInfo>
   );
 }