Increase width for various form controls (#13895)

app/client/src/components/formControls/DropDownControl.tsx

@@ -20,7 +20,7 @@ const DropdownSelect = styled.div`
 
 class DropDownControl extends BaseControl<DropDownControlProps> {
   render() {
-    let width = "20vw";
+    let width = "35vw";
     if (
       "customStyles" in this.props &&
       !!this.props.customStyles &&

app/client/src/components/formControls/DynamicInputTextControl.tsx

@@ -57,7 +57,7 @@ export function InputText(props: {
     };
   }
 
-  let customStyle = { width: "20vw", minHeight: "38px" };
+  let customStyle = { width: "35vw", minHeight: "38px" };
   if (!!props.customStyles && _.isEmpty(props.customStyles) === false) {
     customStyle = { ...props.customStyles };
     if ("width" in props.customStyles) {

app/client/src/components/formControls/FieldArrayControl.tsx

@@ -74,6 +74,10 @@ function NestedComponents(props: any) {
                 sch = {
                   ...sch,
                   configProperty: `${field}.${sch.key}`,
+                  customStyles: {
+                    width: "20vw",
+                    ...props.customStyles,
+                  },
                 };
                 return (
                   <FormControl

app/client/src/components/formControls/FixedKeyInputControl.tsx

@@ -6,7 +6,7 @@ import TextField from "components/editorComponents/form/fields/TextField";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  width: 20vw;
+  width: 35vw;
 `;
 
 class FixKeyInputControl extends BaseControl<FixedKeyInputControlProps> {

app/client/src/components/formControls/InputTextControl.tsx

@@ -31,11 +31,12 @@ export function InputText(props: {
   name: string;
   encrypted?: boolean;
   disabled?: boolean;
+  customStyles?: Record<string, any>;
 }) {
   const { dataType, disabled, name, placeholder } = props;
 
   return (
-    <div data-cy={name} style={{ width: "20vw" }}>
+    <div data-cy={name} style={{ width: "35vw", ...props.customStyles }}>
       <Field
         component={renderComponent}
         datatype={dataType}

app/client/src/components/formControls/PaginationControl.tsx

@@ -28,6 +28,9 @@ const valueFieldConfig: any = {
   key: "value",
   controlType: "QUERY_DYNAMIC_INPUT_TEXT",
   placeholderText: "value",
+  customStyles: {
+    width: "20vw",
+  },
 };
 
 const limitFieldConfig: any = {
@@ -64,6 +67,11 @@ export function Pagination(props: {
     configProperty,
   );
 
+  const defaultStyles = {
+    width: "20vw",
+    ...customStyles,
+  };
+
   return (
     <div
       data-cy={name}
@@ -77,7 +85,7 @@ export function Pagination(props: {
           config={{
             ...limitFieldConfig,
             label: "Limit",
-            customStyles,
+            defaultStyles,
             configProperty: limitPath,
             initialValue:
               typeof initialValue === "object" ? initialValue.limit : null,
@@ -93,7 +101,7 @@ export function Pagination(props: {
           config={{
             ...offsetFieldConfig,
             label: "Offset",
-            customStyles,
+            defaultStyles,
             configProperty: offsetPath,
             initialValue:
               typeof initialValue === "object" ? initialValue.offset : null,

app/client/src/components/formControls/SortingControl.tsx

@@ -25,6 +25,9 @@ const columnFieldConfig: any = {
   inputType: "TEXT",
   // placeholderText: "Select Column",
   placeholderText: "Column name",
+  customStyles: {
+    width: "25vw",
+  },
 };
 
 // Form config for the order field
@@ -42,6 +45,9 @@ const orderFieldConfig: any = {
       value: OrderDropDownValues.DESCENDING,
     },
   ],
+  customStyles: {
+    width: "10vw",
+  },
 };
 
 // main container for the fsorting component