From dd46351e3856989a29b71f7967a586438c03ac22 Mon Sep 17 00:00:00 2001
From: Ayangade Adeoluwa <37867493+Irongade@users.noreply.github.com>
Date: Wed, 18 May 2022 15:37:47 +0100
Subject: [PATCH] Increase width for various form controls (#13895)

---
 .../src/components/formControls/DropDownControl.tsx  |  2 +-
 .../formControls/DynamicInputTextControl.tsx         |  2 +-
 .../components/formControls/FieldArrayControl.tsx    |  4 ++++
 .../components/formControls/FixedKeyInputControl.tsx |  2 +-
 .../src/components/formControls/InputTextControl.tsx |  3 ++-
 .../components/formControls/PaginationControl.tsx    | 12 ++++++++++--
 .../src/components/formControls/SortingControl.tsx   |  6 ++++++
 7 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/client/src/components/formControls/DropDownControl.tsx b/app/client/src/components/formControls/DropDownControl.tsx
index 7a8414bc02..8cc35df8e1 100644
--- a/app/client/src/components/formControls/DropDownControl.tsx
+++ b/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 &&
diff --git a/app/client/src/components/formControls/DynamicInputTextControl.tsx b/app/client/src/components/formControls/DynamicInputTextControl.tsx
index 94a0e27701..d0dac9fb18 100644
--- a/app/client/src/components/formControls/DynamicInputTextControl.tsx
+++ b/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) {
diff --git a/app/client/src/components/formControls/FieldArrayControl.tsx b/app/client/src/components/formControls/FieldArrayControl.tsx
index 7185b311c9..ee1729c83e 100644
--- a/app/client/src/components/formControls/FieldArrayControl.tsx
+++ b/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
diff --git a/app/client/src/components/formControls/FixedKeyInputControl.tsx b/app/client/src/components/formControls/FixedKeyInputControl.tsx
index a2b9946bab..41a9159ef9 100644
--- a/app/client/src/components/formControls/FixedKeyInputControl.tsx
+++ b/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> {
diff --git a/app/client/src/components/formControls/InputTextControl.tsx b/app/client/src/components/formControls/InputTextControl.tsx
index 782fe9d096..5544039392 100644
--- a/app/client/src/components/formControls/InputTextControl.tsx
+++ b/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}
diff --git a/app/client/src/components/formControls/PaginationControl.tsx b/app/client/src/components/formControls/PaginationControl.tsx
index 74a93bc004..053f304619 100644
--- a/app/client/src/components/formControls/PaginationControl.tsx
+++ b/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,
diff --git a/app/client/src/components/formControls/SortingControl.tsx b/app/client/src/components/formControls/SortingControl.tsx
index 805639a5bf..a9133bd5d9 100644
--- a/app/client/src/components/formControls/SortingControl.tsx
+++ b/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