feat: center align action forms (#37763)

## Description

This PR will align the action forms to the center. 

Fixes #37951


## Automation

/ok-to-test tags="@tag.Sanity, @tag.Datasource"

### 🔍 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/12156033628>
> Commit: 707ec4f21cc55f3b5a8dbd3ba5dafa147b6272f1
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12156033628&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity, @tag.Datasource`
> Spec:
> <hr>Wed, 04 Dec 2024 14:21:33 UTC
<!-- end of auto-generated comment: Cypress test results  -->


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


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

- **New Features**
- Enhanced styling for the form components, improving layout flexibility
and responsiveness.
- Introduced a new class for form information text to allow for specific
styling.
  
- **Bug Fixes**
- Adjusted styles to ensure proper display of text and layout in various
form components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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 */
 }

app/client/src/PluginActionEditor/components/PluginActionForm/components/UQIEditor/UQIEditorForm.tsx

@@ -20,6 +20,7 @@ const UQIEditorForm = () => {
 
   return (
     <Flex
+      alignItems="center"
       data-testid="t--uqi-editor-form"
       flexDirection="column"
       overflowY="scroll"

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>
   );
 }