From f837b31e0b7bafeb13d638bde067ff17ba59692d Mon Sep 17 00:00:00 2001
From: Viraj Bahulkar <bbahulkar@gmail.com>
Date: Fri, 30 Jul 2021 11:36:27 +0530
Subject: [PATCH] Fix input consistency in posgres GUI (#385)

* Fix input consistency in posgres GUI

* Add wrapper class to GUI select search element
---
 .../QueryManager/QueryEditors/Postgresql.jsx  | 24 ++++++++++---------
 frontend/src/_styles/theme.scss               |  7 ++++++
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
index 76ae998c62..cc67f1d449 100644
--- a/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
+++ b/frontend/src/Editor/QueryManager/QueryEditors/Postgresql.jsx
@@ -60,7 +60,7 @@ class Postgresql extends React.Component {
             )}
             {options.mode === 'gui' && (
               <div>
-                <div className="row">
+                <div className="row">  
                   <div className="col">
                     <label className="form-label">Table</label>
                     <CodeHinter
@@ -71,16 +71,18 @@ class Postgresql extends React.Component {
                   </div>
                   <div className="col">
                     <label className="form-label">Operation</label>
-                    <SelectSearch
-                      options={[{ name: 'Bulk update using primary key', value: 'bulk_update_pkey' }]}
-                      value={options.operation}
-                      search={true}
-                      onChange={(value) => {
-                        changeOption(this, 'operation', value);
-                      }}
-                      filterOptions={fuzzySearch}
-                      placeholder="Select.."
-                    />
+                    <div className="gui-select-wrappper">
+                      <SelectSearch
+                        options={[{ name: 'Bulk update using primary key', value: 'bulk_update_pkey' }]}
+                        value={options.operation}
+                        search={true}
+                        onChange={(value) => {
+                          changeOption(this, 'operation', value);
+                        }}
+                        filterOptions={fuzzySearch}
+                        placeholder="Select.."
+                      />
+                    </div>
                   </div>
                 </div>
 
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index ac1396308c..24be238834 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -1968,6 +1968,13 @@ input:focus-visible {
   opacity: 0.74;
 }
 
+
+.gui-select-wrappper .select-search__input {
+  height: 30px;
+}
+
+
 .theme-dark .input-group-text, .theme-dark .markdown > table thead th, .theme-dark .table thead th {
   background: #1c252f;
 }
+