From ce89e8499e0b1ae8fbb2ce91f8d55d02cfc477ab Mon Sep 17 00:00:00 2001
From: darth-coder00 <86726556+darth-coder00@users.noreply.github.com>
Date: Wed, 18 May 2022 17:52:28 +0530
Subject: [PATCH] Fix #4781: forms text fields looks like it has space in the
 beginning (#5020)

---
 .../cypress/integration/Pages/myData.spec.js  |  8 ++-
 .../Forms/ColumnTestForm.tsx                  | 16 +++---
 .../Forms/TableTestForm.tsx                   |  8 +--
 .../AddGlossary/AddGlossary.component.tsx     |  2 +-
 .../AddGlossaryTerm.component.tsx             |  8 +--
 .../AddIngestion/Steps/ConfigureIngestion.tsx |  8 +--
 .../AddService/Steps/ConfigureService.tsx     |  2 +-
 .../AddService/Steps/ConnectionDetails.tsx    | 52 +++++++++----------
 .../AddService/Steps/SelectServiceType.tsx    |  2 +-
 .../src/components/AddWebhook/AddWebhook.tsx  | 14 ++---
 .../BotsDetail/BotsDetail.component.tsx       |  2 +-
 .../CreateUser/CreateUser.component.tsx       |  4 +-
 .../NodeSuggestions.component.tsx             |  2 +-
 .../GlossaryReferences/GlossaryReferences.tsx |  6 +--
 .../GlossaryTermsV1.component.tsx             |  2 +-
 .../EntityDeleteModal/EntityDeleteModal.tsx   |  2 +-
 .../ui/src/components/TeamDetails/Form.tsx    |  4 +-
 .../components/TeamDetails/TeamDetails.tsx    |  2 +-
 .../src/components/Users/Users.component.tsx  |  2 +-
 .../DBTConfigFormBuilder.tsx                  |  2 +-
 .../DBTConfigFormBuilder/DBTGCSConfig.tsx     | 28 +++++-----
 .../DBTConfigFormBuilder/DBTHttpConfig.tsx    |  4 +-
 .../DBTConfigFormBuilder/DBTLocalConfig.tsx   |  4 +-
 .../DBTConfigFormBuilder/DBTS3Config.tsx      | 14 ++---
 .../common/FilterPattern/FilterPattern.tsx    |  4 +-
 .../SearchInput/SearchInput.component.tsx     |  2 +-
 .../components/common/searchbar/Searchbar.tsx |  2 +-
 .../src/components/dropdown/DropDownList.tsx  |  2 +-
 .../resources/ui/src/pages/teams/Form.tsx     |  4 +-
 .../main/resources/ui/src/styles/tailwind.css |  6 ++-
 30 files changed, 114 insertions(+), 104 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/myData.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/myData.spec.js
index e2c43f8beff..faa655ae2f4 100644
--- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/myData.spec.js
+++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/myData.spec.js
@@ -12,7 +12,13 @@
  */
 
 import { visitEntityTab } from '../../common/common';
-import { FOLLOWING_TITLE, MYDATA_SUMMARY_OPTIONS, MY_DATA_TITLE, RECENT_SEARCH_TITLE, RECENT_VIEW_TITLE } from '../../constants/constants';
+import {
+  FOLLOWING_TITLE,
+  MYDATA_SUMMARY_OPTIONS,
+  MY_DATA_TITLE,
+  RECENT_SEARCH_TITLE,
+  RECENT_VIEW_TITLE,
+} from '../../constants/constants';
 
 describe('MyData page should work', () => {
   beforeEach(() => {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/ColumnTestForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/ColumnTestForm.tsx
index 02d815b1534..26956116ed6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/ColumnTestForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/ColumnTestForm.tsx
@@ -382,7 +382,7 @@ const ColumnTestForm = ({
               Min:
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="min"
               id="min"
               name="min"
@@ -397,7 +397,7 @@ const ColumnTestForm = ({
               Max:
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="max"
               id="max"
               name="max"
@@ -423,7 +423,7 @@ const ColumnTestForm = ({
             {requiredField('Count:')}
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="missingCountValue"
             id="missingCountValue"
             name="missingCountValue"
@@ -454,7 +454,7 @@ const ColumnTestForm = ({
               <div className="tw-w-11/12">
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`value-key-${i}`}
                     name="key"
                     placeholder="Missing value to be match"
@@ -491,7 +491,7 @@ const ColumnTestForm = ({
           {requiredField('Regex:')}
         </label>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="regex"
           id="regex"
           name="regex"
@@ -524,7 +524,7 @@ const ColumnTestForm = ({
             <div className="tw-w-11/12">
               <Field>
                 <input
-                  className="tw-form-inputs tw-px-3 tw-py-1"
+                  className="tw-form-inputs tw-form-inputs-padding"
                   id={`option-key-${i}`}
                   name="key"
                   placeholder="Values not to be in the set"
@@ -589,7 +589,7 @@ const ColumnTestForm = ({
               {requiredField('Column Name:')}
             </label>
             <select
-              className={classNames('tw-form-inputs tw-px-3 tw-py-1', {
+              className={classNames('tw-form-inputs tw-form-inputs-padding', {
                 'tw-cursor-not-allowed': !isUndefined(data),
               })}
               data-testid="columnName"
@@ -617,7 +617,7 @@ const ColumnTestForm = ({
               {requiredField('Test Type:')}
             </label>
             <select
-              className={classNames('tw-form-inputs tw-px-3 tw-py-1', {
+              className={classNames('tw-form-inputs tw-form-inputs-padding', {
                 'tw-cursor-not-allowed': !isUndefined(data),
               })}
               data-testid="columTestType"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/TableTestForm.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/TableTestForm.tsx
index 504440938db..624a344e4e8 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/TableTestForm.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddDataQualityTest/Forms/TableTestForm.tsx
@@ -210,7 +210,7 @@ const TableTestForm = ({
           {requiredField('Value:')}
         </label>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="value"
           id="value"
           name="value"
@@ -233,7 +233,7 @@ const TableTestForm = ({
               Min:
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="min"
               id="min"
               name="min"
@@ -248,7 +248,7 @@ const TableTestForm = ({
               Max:
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="max"
               id="max"
               name="max"
@@ -279,7 +279,7 @@ const TableTestForm = ({
               {requiredField('Test Type:')}
             </label>
             <select
-              className={classNames('tw-form-inputs tw-px-3 tw-py-1', {
+              className={classNames('tw-form-inputs tw-form-inputs-padding', {
                 'tw-cursor-not-allowed': !isUndefined(data),
               })}
               data-testid="tableTestType"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
index f95baddd7db..ee00d35d633 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx
@@ -196,7 +196,7 @@ const AddGlossary = ({
           </label>
 
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="name"
             id="name"
             name="name"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
index 56fb4ed9595..a7ccc8b33ae 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddGlossaryTerm/AddGlossaryTerm.component.tsx
@@ -308,7 +308,7 @@ const AddGlossaryTerm = ({
           </label>
 
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="name"
             id="name"
             name="name"
@@ -346,7 +346,7 @@ const AddGlossaryTerm = ({
           </label>
 
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="synonyms"
             id="synonyms"
             name="synonyms"
@@ -375,7 +375,7 @@ const AddGlossaryTerm = ({
               <div className="tw-grid tw-grid-cols-2 tw-gap-x-2 tw-w-11/12">
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`name-${i}`}
                     name="key"
                     placeholder="Name"
@@ -388,7 +388,7 @@ const AddGlossaryTerm = ({
                 </Field>
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`url-${i}`}
                     name="endpoint"
                     placeholder="url"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ConfigureIngestion.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ConfigureIngestion.tsx
index 409edd0b31f..b708676c944 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ConfigureIngestion.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddIngestion/Steps/ConfigureIngestion.tsx
@@ -298,7 +298,7 @@ const ConfigureIngestion = ({
             process usage data.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="query-log-duration"
             id="query-log-duration"
             name="query-log-duration"
@@ -319,7 +319,7 @@ const ConfigureIngestion = ({
             Absolute file path required.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="stage-file-location"
             id="stage-file-location"
             name="stage-file-location"
@@ -339,7 +339,7 @@ const ConfigureIngestion = ({
             Configuration to set the limit for query logs.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="result-limit"
             id="result-limit"
             name="result-limit"
@@ -366,7 +366,7 @@ const ConfigureIngestion = ({
               Name that identifies this pipeline instance uniquely.
             </p>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="name"
               id="name"
               name="name"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx
index 7378a407d2b..ced08b81efd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConfigureService.tsx
@@ -37,7 +37,7 @@ const ConfigureService = ({
         </label>
 
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="service-name"
           id="serviceName"
           name="serviceName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConnectionDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConnectionDetails.tsx
index 025f8ddcc39..3ea8bb3c42f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConnectionDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/ConnectionDetails.tsx
@@ -69,7 +69,7 @@ const ConnectionDetails = ({
               {requiredField('Host:')}
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="url"
               id="url"
               name="url"
@@ -85,7 +85,7 @@ const ConnectionDetails = ({
               {requiredField('Port:')}
             </label>
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="port"
               id="port"
               name="port"
@@ -102,7 +102,7 @@ const ConnectionDetails = ({
             Username:
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="username"
             id="username"
             name="username"
@@ -117,7 +117,7 @@ const ConnectionDetails = ({
             Password:
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="password"
             id="password"
             name="password"
@@ -133,7 +133,7 @@ const ConnectionDetails = ({
             Database:
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="database"
             id="database"
             name="database"
@@ -152,7 +152,7 @@ const ConnectionDetails = ({
                 Warehouse:
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="warehouse"
                 id="warehouse"
                 name="warehouse"
@@ -168,7 +168,7 @@ const ConnectionDetails = ({
                 Account:
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="account"
                 id="account"
                 name="account"
@@ -198,7 +198,7 @@ const ConnectionDetails = ({
               <div className="tw-grid tw-grid-cols-2 tw-gap-x-2 tw-w-11/12">
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`option-key-${i}`}
                     name="key"
                     placeholder="Key"
@@ -215,7 +215,7 @@ const ConnectionDetails = ({
                 </Field>
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`option-value-${i}`}
                     name="value"
                     placeholder="Value"
@@ -264,7 +264,7 @@ const ConnectionDetails = ({
               <div className="tw-grid tw-grid-cols-2 tw-gap-x-2 tw-w-11/12">
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`argument-key-${i}`}
                     name="key"
                     placeholder="Key"
@@ -281,7 +281,7 @@ const ConnectionDetails = ({
                 </Field>
                 <Field>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     id={`argument-value-${i}`}
                     name="value"
                     placeholder="Value"
@@ -325,7 +325,7 @@ const ConnectionDetails = ({
             {requiredField('Broker Url:')}
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="brokers-url"
             id="brokers"
             name="brokers"
@@ -341,7 +341,7 @@ const ConnectionDetails = ({
             Schema Registry:
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="schema-registry"
             id="schemaRegistry"
             name="schemaRegistry"
@@ -366,7 +366,7 @@ const ConnectionDetails = ({
                 {requiredField('Dashboard Url:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="dashboardUrl"
                 name="dashboardUrl"
                 placeholder="http(s)://hostname:port"
@@ -381,7 +381,7 @@ const ConnectionDetails = ({
                 {requiredField('Api key:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="apiKey"
                 name="apiKey"
                 placeholder="api key"
@@ -404,7 +404,7 @@ const ConnectionDetails = ({
                 {requiredField('Site Name:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="siteName"
                 name="siteName"
                 placeholder="site name"
@@ -419,7 +419,7 @@ const ConnectionDetails = ({
                 {requiredField('Site Url:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="dashboardUrl"
                 name="dashboardUrl"
                 placeholder="http(s)://hostname:port"
@@ -434,7 +434,7 @@ const ConnectionDetails = ({
                 {requiredField('Username:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="username"
                 name="username"
                 placeholder="username"
@@ -449,7 +449,7 @@ const ConnectionDetails = ({
                 {requiredField('Password:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="password"
                 name="password"
                 placeholder="password"
@@ -464,7 +464,7 @@ const ConnectionDetails = ({
                 {requiredField('Server:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="server"
                 name="server"
                 placeholder="http(s)://hostname:port"
@@ -479,7 +479,7 @@ const ConnectionDetails = ({
                 {requiredField('Api Version:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="api-version"
                 id="apiVersion"
                 name="apiVersion"
@@ -495,7 +495,7 @@ const ConnectionDetails = ({
                 Environment:
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id="env"
                 name="env"
                 placeholder="environment"
@@ -517,7 +517,7 @@ const ConnectionDetails = ({
                 {requiredField('Dashboard Url:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="dashboard-url"
                 id="dashboard-url"
                 name="dashboard-url"
@@ -534,7 +534,7 @@ const ConnectionDetails = ({
                 {requiredField('Username:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="username"
                 id="username"
                 name="username"
@@ -550,7 +550,7 @@ const ConnectionDetails = ({
                 {requiredField('Password:')}
               </label>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="password"
                 id="password"
                 name="password"
@@ -578,7 +578,7 @@ const ConnectionDetails = ({
           {requiredField('Pipeline Url:')}
         </label>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="pipeline-url"
           id="pipelineUrl"
           name="pipelineUrl"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
index 89f2af321e8..5973f0729c3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddService/Steps/SelectServiceType.tsx
@@ -58,7 +58,7 @@ const SelectServiceType = ({
     <div>
       <Field>
         <select
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="service-category"
           id="serviceCategory"
           name="serviceCategory"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx b/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx
index ed7126583ed..c89a65eaeed 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/AddWebhook/AddWebhook.tsx
@@ -472,7 +472,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
           </label>
           {!data?.name ? (
             <input
-              className="tw-form-inputs tw-px-3 tw-py-1"
+              className="tw-form-inputs tw-form-inputs-padding"
               data-testid="name"
               id="name"
               name="name"
@@ -484,7 +484,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
           ) : (
             <input
               disabled
-              className="tw-form-inputs tw-px-3 tw-py-1 tw-cursor-not-allowed"
+              className="tw-form-inputs tw-form-inputs-padding tw-cursor-not-allowed"
               id="name"
               name="name"
               value={name}
@@ -514,7 +514,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
             {requiredField('Endpoint URL:')}
           </label>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="endpoint-url"
             disabled={!allowAccess}
             id="endpoint-url"
@@ -686,7 +686,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
                     Batch Size:
                   </label>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     data-testid="batch-size"
                     disabled={!allowAccess}
                     id="batch-size"
@@ -704,7 +704,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
                     Connection Timeout (s):
                   </label>
                   <input
-                    className="tw-form-inputs tw-px-3 tw-py-1"
+                    className="tw-form-inputs tw-form-inputs-padding"
                     data-testid="connection-timeout"
                     disabled={!allowAccess}
                     id="connection-timeout"
@@ -729,7 +729,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
                     <div className="tw-flex tw-items-center">
                       <input
                         readOnly
-                        className="tw-form-inputs tw-px-3 tw-py-1"
+                        className="tw-form-inputs tw-form-inputs-padding"
                         data-testid="secret-key"
                         id="secret-key"
                         name="secret-key"
@@ -778,7 +778,7 @@ const AddWebhook: FunctionComponent<AddWebhookProps> = ({
                   <div className="tw-flex tw-items-center">
                     <input
                       readOnly
-                      className="tw-form-inputs tw-px-3 tw-py-1"
+                      className="tw-form-inputs tw-form-inputs-padding"
                       data-testid="secret-key"
                       id="secret-key"
                       name="secret-key"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
index 268e82215dc..530d8c49c07 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/BotsDetail/BotsDetail.component.tsx
@@ -164,7 +164,7 @@ const BotsDetail: FC<BotsDetailProp> = ({
         {isDisplayNameEdit ? (
           <div className="tw-flex tw-items-center tw-gap-1">
             <input
-              className="tw-form-inputs tw-px-3 tw-py-0.5 tw-w-64"
+              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
               data-testid="displayName"
               id="displayName"
               name="displayName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
index ffa44aeb990..fb57952c309 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx
@@ -235,7 +235,7 @@ const CreateUser = ({
           {requiredField('Email')}
         </label>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="email"
           id="email"
           name="email"
@@ -256,7 +256,7 @@ const CreateUser = ({
           Display Name
         </label>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="displayName"
           id="displayName"
           name="displayName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/NodeSuggestions.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/NodeSuggestions.component.tsx
index bf671b5fd1c..12c53d92b53 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/NodeSuggestions.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/EntityLineage/NodeSuggestions.component.tsx
@@ -81,7 +81,7 @@ const NodeSuggestions: FC<EntitySuggestionProps> = ({
   return (
     <div>
       <input
-        className="tw-form-inputs tw-px-3 tw-py-1 tw-w-full"
+        className="tw-form-inputs tw-form-inputs-padding tw-w-full"
         placeholder={`Search for ${capitalize(entityType)}s...`}
         type="search"
         value={searchValue}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryReferences/GlossaryReferences.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryReferences/GlossaryReferences.tsx
index 82f42f880b6..527437490bd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryReferences/GlossaryReferences.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryReferences/GlossaryReferences.tsx
@@ -11,12 +11,12 @@
  *  limitations under the License.
  */
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { FunctionComponent, useEffect, useState } from 'react';
 import { TermReference } from '../../generated/entity/data/glossaryTerm';
 import SVGIcons, { Icons } from '../../utils/SvgUtils';
 import { Button } from '../buttons/Button/Button';
 import { Field } from '../Field/Field';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface Props {
   referenceList: TermReference[];
@@ -74,7 +74,7 @@ const GlossaryReferences: FunctionComponent<Props> = ({
           <div className="tw-grid tw-grid-cols-2 tw-gap-x-2 tw-w-11/12">
             <Field>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id={`name-${i}`}
                 name="name"
                 placeholder="Name"
@@ -87,7 +87,7 @@ const GlossaryReferences: FunctionComponent<Props> = ({
             </Field>
             <Field>
               <input
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 id={`url-${i}`}
                 name="endpoint"
                 placeholder="Endpoint"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
index 07d9919bebc..b15eaea7ca0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/GlossaryTerms/GlossaryTermsV1.component.tsx
@@ -402,7 +402,7 @@ const GlossaryTermsV1 = ({
           {isSynonymsEditing ? (
             <div className="tw-flex tw-items-center tw-gap-1">
               <input
-                className="tw-form-inputs tw-px-3 tw-py-0.5 tw-w-64"
+                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
                 data-testid="synonyms"
                 id="synonyms"
                 name="synonyms"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
index 20f76dc3e86..0ea6ddeef68 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Modals/EntityDeleteModal/EntityDeleteModal.tsx
@@ -84,7 +84,7 @@ const EntityDeleteModal: FC<Prop> = ({
           </p>
           <input
             autoComplete="off"
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="confirmation-text-input"
             disabled={loadingState === 'waiting'}
             name="entityName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Form.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Form.tsx
index b99611221cb..d5d750644e9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Form.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/Form.tsx
@@ -86,7 +86,7 @@ const Form: React.FC<FormProp> = forwardRef(
               <label className="tw-form-label required-field">Name</label>
               <input
                 autoComplete="off"
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="name"
                 name="name"
                 placeholder="Name"
@@ -102,7 +102,7 @@ const Form: React.FC<FormProp> = forwardRef(
               </label>
               <input
                 autoComplete="off"
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="displayName"
                 name="displayName"
                 placeholder="Display name"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
index 50ec4fbc49d..c757416ce01 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx
@@ -515,7 +515,7 @@ const TeamDetails = ({
         {isHeadingEditing ? (
           <div className="tw-flex tw-items-center tw-gap-1">
             <input
-              className="tw-form-inputs tw-px-3 tw-py-0.5 tw-w-64"
+              className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
               data-testid="synonyms"
               id="synonyms"
               name="synonyms"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
index 6cbda07a51d..3ad602fb93f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx
@@ -195,7 +195,7 @@ const Users = ({
           {isDisplayNameEdit ? (
             <div className="tw-flex tw-items-center tw-gap-1">
               <input
-                className="tw-form-inputs tw-px-3 tw-py-0.5 tw-w-64"
+                className="tw-form-inputs tw-form-inputs-padding tw-py-0.5 tw-w-64"
                 data-testid="displayName"
                 id="displayName"
                 name="displayName"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTConfigFormBuilder.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTConfigFormBuilder.tsx
index b29efc1731a..232f6b6a610 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTConfigFormBuilder.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTConfigFormBuilder.tsx
@@ -191,7 +191,7 @@ const DBTConfigFormBuilder: FunctionComponent<DBTConfigFormProps> = ({
           Available sources to fetch DBT catalog and manifest files.
         </p>
         <select
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="dbt-source"
           id="dbt-source"
           name="dbt-source"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTGCSConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTGCSConfig.tsx
index 322309cc08c..2ac1f2b280c 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTGCSConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTGCSConfig.tsx
@@ -147,7 +147,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud service account type.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="credential-type"
             id="credential-type"
             name="credential-type"
@@ -167,7 +167,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud project id.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="project-id"
             id="project-id"
             name="project-id"
@@ -187,7 +187,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud Private key id.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="private-key-id"
             id="private-key-id"
             name="private-key-id"
@@ -209,7 +209,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud private key.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="private-key"
             id="private-key"
             name="private-key"
@@ -229,7 +229,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud email.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="client-email"
             id="client-email"
             name="client-email"
@@ -249,7 +249,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud Client ID.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="client-id"
             id="client-id"
             name="client-id"
@@ -267,7 +267,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud auth uri.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="auth-uri"
             id="auth-uri"
             name="auth-uri"
@@ -285,7 +285,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud token uri.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="token-uri"
             id="token-uri"
             name="token-uri"
@@ -305,7 +305,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud auth provider certificate.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="auth-x509-certificate-uri"
             id="auth-x509-certificate-uri"
             name="auth-x509-certificate-uri"
@@ -328,7 +328,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
             Google Cloud client certificate uri.
           </p>
           <input
-            className="tw-form-inputs tw-px-3 tw-py-1"
+            className="tw-form-inputs tw-form-inputs-padding"
             data-testid="client-x509-certificate-uri"
             id="client-x509-certificate-uri"
             name="client-x509-certificate-uri"
@@ -356,7 +356,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
           GCS Credentials Path.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="gcs-cred-path"
           id="gcs-cred-path"
           name="gcs-cred-path"
@@ -389,7 +389,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
           Available sources to fetch DBT catalog and manifest files.
         </p>
         <select
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="gcs-config"
           id="gcs-config"
           name="gcs-config"
@@ -419,7 +419,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
           Name of the bucket where the dbt files are stored.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="dbt-bucket-name"
           id="dbt-bucket-name"
           name="dbt-bucket-name"
@@ -438,7 +438,7 @@ export const DBTGCSConfig: FunctionComponent<Props> = ({
           Path of the folder where the dbt files are stored.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="dbt-object-prefix"
           id="dbt-object-prefix"
           name="dbt-object-prefix"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTHttpConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTHttpConfig.tsx
index bca731eb792..6cf7622714f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTHttpConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTHttpConfig.tsx
@@ -68,7 +68,7 @@ export const DBTHttpConfig: FunctionComponent<Props> = ({
           DBT catalog file to extract dbt models with their column schemas.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="catalog-url"
           id="catalog-url"
           name="catalog-url"
@@ -89,7 +89,7 @@ export const DBTHttpConfig: FunctionComponent<Props> = ({
           tables.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="manifest-url"
           id="manifest-url"
           name="manifest-url"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTLocalConfig.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTLocalConfig.tsx
index 2ecfcb5cb94..8097fdb927d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTLocalConfig.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTLocalConfig.tsx
@@ -70,7 +70,7 @@ export const DBTLocalConfig: FunctionComponent<Props> = ({
           DBT catalog file to extract dbt models with their column schemas.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="catalog-file"
           id="catalog-file"
           name="catalog-file"
@@ -91,7 +91,7 @@ export const DBTLocalConfig: FunctionComponent<Props> = ({
           tables.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="manifest-file"
           id="manifest-file"
           name="manifest-file"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTS3Config.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTS3Config.tsx
index f95b482a007..14be8735ab6 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTS3Config.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/DBTConfigFormBuilder/DBTS3Config.tsx
@@ -98,7 +98,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           AWS Access Key ID.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="aws-access-key-id"
           id="aws-access-key-id"
           name="aws-access-key-id"
@@ -118,7 +118,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           AWS Secret Access Key.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="aws-secret-access-key-id"
           id="aws-secret-access-key-id"
           name="aws-secret-access-key-id"
@@ -136,7 +136,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           AWS Region.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="aws-region"
           id="aws-region"
           name="aws-region"
@@ -156,7 +156,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           AWS Session Token.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="aws-session-token"
           id="aws-session-token"
           name="aws-session-token"
@@ -175,7 +175,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           EndPoint URL for the AWS.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="endpoint-url"
           id="endpoint-url"
           name="endpoint-url"
@@ -195,7 +195,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           Name of the bucket where the dbt files are stored.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="dbt-bucket-name"
           id="dbt-bucket-name"
           name="dbt-bucket-name"
@@ -214,7 +214,7 @@ export const DBTS3Config: FunctionComponent<Props> = ({
           Path of the folder where the dbt files are stored.
         </p>
         <input
-          className="tw-form-inputs tw-px-3 tw-py-1"
+          className="tw-form-inputs tw-form-inputs-padding"
           data-testid="dbt-object-prefix"
           id="dbt-object-prefix"
           name="dbt-object-prefix"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
index 2ee561c3af2..6e96e6a0640 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/FilterPattern/FilterPattern.tsx
@@ -63,7 +63,7 @@ const FilterPattern = ({
           <Field>
             <label className="tw-block tw-form-label">Include:</label>
             <input
-              className="tw-form-inputs tw-relative tw-px-2 tw-py-2"
+              className="tw-form-inputs tw-relative tw-form-inputs-padding tw-py-2"
               data-testid={`filter-pattern-includes-${type}`}
               placeholder="Enter a list of strings/regex patterns as a comma separated value"
               type="text"
@@ -74,7 +74,7 @@ const FilterPattern = ({
           <Field>
             <label className="tw-block tw-form-label">Exclude:</label>
             <input
-              className="tw-form-inputs tw-relative tw-px-2 tw-py-2"
+              className="tw-form-inputs tw-relative tw-form-inputs-padding tw-py-2"
               data-testid={`filter-pattern-excludes-${type}`}
               placeholder="Enter a list of strings/regex patterns as a comma separated value"
               type="text"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchInput/SearchInput.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchInput/SearchInput.component.tsx
index 59d9596ec9a..8ec1be33fe2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchInput/SearchInput.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchInput/SearchInput.component.tsx
@@ -92,7 +92,7 @@ const SearchInput = ({
           />
         )}
         <input
-          className="tw-form-inputs-bottom-border tw-relative tw-px-3 tw-py-1 tw-pr-8"
+          className="tw-form-inputs-bottom-border tw-relative tw-form-inputs-padding tw-pr-8"
           data-testid="searchbar"
           placeholder={placeholder}
           type="text"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx
index a48191e7c55..e4e3124b37d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/searchbar/Searchbar.tsx
@@ -79,7 +79,7 @@ const Searchbar = ({
           icon={searchIcon}
         />
         <input
-          className="tw-form-inputs tw-relative tw-px-3 tw-py-1 tw-pl-8"
+          className="tw-form-inputs tw-relative tw-form-inputs-padding tw-pl-8"
           data-testid="searchbar"
           placeholder={placeholder}
           type="text"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
index a714fc04c0b..1304d0d0232 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/dropdown/DropDownList.tsx
@@ -252,7 +252,7 @@ const DropDownList: FunctionComponent<DropDownListProp> = ({
                 {showSearchBar && (
                   <div className="has-search tw-p-4 tw-pb-2">
                     <input
-                      className="tw-form-inputs tw-px-3 tw-py-1"
+                      className="tw-form-inputs tw-form-inputs-padding"
                       data-testid="searchInputText"
                       placeholder="Search..."
                       type="text"
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.tsx
index b99611221cb..d5d750644e9 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/teams/Form.tsx
@@ -86,7 +86,7 @@ const Form: React.FC<FormProp> = forwardRef(
               <label className="tw-form-label required-field">Name</label>
               <input
                 autoComplete="off"
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="name"
                 name="name"
                 placeholder="Name"
@@ -102,7 +102,7 @@ const Form: React.FC<FormProp> = forwardRef(
               </label>
               <input
                 autoComplete="off"
-                className="tw-form-inputs tw-px-3 tw-py-1"
+                className="tw-form-inputs tw-form-inputs-padding"
                 data-testid="displayName"
                 name="displayName"
                 placeholder="Display name"
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
index 3182b89be04..4ba0e19a6b3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/tailwind.css
@@ -198,6 +198,10 @@
     focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
   }
 
+  .tw-form-inputs-padding {
+    @apply tw-px-2 tw-py-1;
+  }
+
   .tw-form-inputs-bottom-border {
     @apply tw-w-full tw-text-grey-body tw-border-b tw-bg-body-main tw-border-main
     focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
@@ -395,7 +399,7 @@
   }
 
   .rjsf .form-control {
-    @apply tw-w-full tw-px-3 tw-py-1 tw-text-grey-body tw-rounded tw-border tw-border-main
+    @apply tw-w-full tw-px-2 tw-py-1 tw-text-grey-body tw-rounded tw-border tw-border-main
     focus:tw-outline-none focus:tw-border-focus hover:tw-border-hover;
   }