ui/form: Fix select tooltip wraping grid row (#823)

* ui/form: Fix select tooltip wraping grid row * Update changelog
ethyca · Jul 28, 2022 · 8775c86 · 8775c86
1 parent 0c01e7b
commit 8775c86
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,13 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/1.7.0...main)
 
+## [1.7.1](https://github.com/ethyca/fides/compare/1.6.1...1.7.1) - 2022-07-28
+### Added
+
+### Fixed
+
+* CustomSelect input tooltips appear next to selector instead of wrapping to a new row.
+
 ## [1.7.0](https://github.com/ethyca/fides/compare/1.6.1...1.7.0) - 2022-06-23
 
 ### Added

diff --git a/clients/admin-ui/src/features/common/form/inputs.tsx b/clients/admin-ui/src/features/common/form/inputs.tsx
@@ -79,42 +79,46 @@ export const CustomSelect = ({
         <FormLabel htmlFor={props.id || props.name} size="sm">
           {label}
         </FormLabel>
-        <Select
-          options={options}
-          onBlur={(option) => {
-            if (option) {
-              field.onBlur(props.name);
-            }
-          }}
-          onChange={(newValue) => {
-            if (newValue) {
-              field.onChange(props.name)(newValue.value);
-            }
-          }}
-          name={props.name}
-          value={selected}
-          size={size}
-          chakraStyles={{
-            dropdownIndicator: (provided) => ({
-              ...provided,
-              bg: "transparent",
-              px: 2,
-              cursor: "inherit",
-            }),
-            indicatorSeparator: (provided) => ({
-              ...provided,
-              display: "none",
-            }),
-            multiValue: (provided) => ({
-              ...provided,
-              background: "primary.400",
-              color: "white",
-            }),
-          }}
-          isSearchable={isSearchable ?? false}
-          isClearable={isClearable}
-        />
-        {tooltip ? <QuestionTooltip label={tooltip} /> : null}
+        <Box display="flex" alignItems="center">
+          <Select
+            options={options}
+            onBlur={(option) => {
+              if (option) {
+                field.onBlur(props.name);
+              }
+            }}
+            onChange={(newValue) => {
+              if (newValue) {
+                field.onChange(props.name)(newValue.value);
+              }
+            }}
+            name={props.name}
+            value={selected}
+            size={size}
+            chakraStyles={{
+              container: (provided) => ({ ...provided, mr: 2, flexGrow: 1 }),
+              dropdownIndicator: (provided) => ({
+                ...provided,
+                bg: "transparent",
+                px: 2,
+                cursor: "inherit",
+              }),
+              indicatorSeparator: (provided) => ({
+                ...provided,
+                display: "none",
+              }),
+              multiValue: (provided) => ({
+                ...provided,
+                background: "primary.400",
+                color: "white",
+              }),
+            }}
+            isSearchable={isSearchable ?? false}
+            isClearable={isClearable}
+          />
+
+          {tooltip ? <QuestionTooltip label={tooltip} /> : null}
+        </Box>
       </Grid>
       {isInvalid ? <FormErrorMessage>{meta.error}</FormErrorMessage> : null}
     </FormControl>