Fix input consistency in posgres GUI (ToolJet#385)

* Fix input consistency in posgres GUI * Add wrapper class to GUI select search element
NeekhilD · Jul 30, 2021 · f837b31 · f837b31
1 parent d35b203
commit f837b31
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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;
 }
+