47 - Fixes subscription dropdown auto resize and alignment (#189)

Co-authored-by: ricardovdheijden <[email protected]>
workfloworchestrator · Dec 1, 2022 · 04834d8 · 04834d8
1 parent d57a604
commit 04834d8
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [v10.5.0] - TBD
 
+-   `#47` Fix subscription dropdowns to not resize when typing and fixes alignments with other input fields
 -   Added description text in Owner_Subscription_Id and added a copy-to-clipboard button
 -   Updated service ticket detail page to show "last_update_time"
 -   `#41` Converted most components to a Functions based approach

diff --git a/src/lib/uniforms-surfnet/src/SubscriptionField.tsx b/src/lib/uniforms-surfnet/src/SubscriptionField.tsx
@@ -13,7 +13,7 @@
  *
  */
 
-import { EuiButtonIcon, EuiFlexItem, EuiFormRow, EuiModal, EuiOverlayMask, EuiText } from "@elastic/eui";
+import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiModal, EuiOverlayMask, EuiText } from "@elastic/eui";
 import ServicePortSelectorModal from "components/modals/ServicePortSelectorModal";
 import { SubscriptionsContext } from "components/subscriptionContext";
 import { ListFieldProps } from "lib/uniforms-surfnet/src/ListField";
@@ -237,7 +237,7 @@ function Subscription({
     const customStyles = getReactSelectTheme(theme);
 
     return (
-        <EuiFlexItem css={subscriptionFieldStyling}>
+        <EuiFlexItem css={subscriptionFieldStyling} grow={1}>
             <section
                 {...filterDOMProps(props)}
                 className={`${className} subscription-field${disabled ? "-disabled" : ""}`}
@@ -252,7 +252,7 @@ function Subscription({
                 >
                     <div>
                         {!disabled && (
-                            <>
+                            <EuiFlexGroup alignItems={"center"} gutterSize={"none"} responsive={false}>
                                 <EuiButtonIcon
                                     className="reload-subscriptions-icon-button"
                                     id={`refresh-icon-${id}`}
@@ -278,7 +278,7 @@ function Subscription({
                                         iconSize="l"
                                     />
                                 )}
-                            </>
+                            </EuiFlexGroup>
                         )}
 
                         {isModalVisible && (

diff --git a/src/lib/uniforms-surfnet/src/SubscriptionFieldStyling.ts b/src/lib/uniforms-surfnet/src/SubscriptionFieldStyling.ts
@@ -13,7 +13,6 @@ export const subscriptionFieldStyling = css`
 
         .euiFormRow > .euiFormRow__fieldWrapper > div {
             display: flex;
-            margin-top: 5px;
         }
     }