ui: fix help-text display style

packages/ui-default/components/autocomplete/autocomplete.page.styl

@@ -2,23 +2,36 @@
   display: none !important
 
 .autocomplete-wrapper
-  width: 300px
   border: 1px solid #d9d9d9
-  background-color: #fff
   padding: 1px
   display: flex
   flex-wrap: wrap
   overflow-y: auto
 
-  &:hover
-    border-color: #40a9ff
+  form-styles()
+  background-color: $input-background-color
+  outline: $input-outline
+  transition: outline-color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
 
-  &.focused
-    border-color: #40a9ff
+  &:focus, &.focused
+    border-color: $input-focus-border-color
+    outline: $input-focus-outline
+    outline-offset: 0
     box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
 
+  // Overwrite, for IE compatibility
+  &:read-only
+    outline: 0
+
+  &:disabled
+    opacity: 0.5
+
+  &:hover
+    border-color: #40a9ff
+
   input
-    background-color: #fff
+    background-color: $input-background-color
     color: rgba(0,0,0,.85)
     height: 30px
     box-sizing: border-box

packages/ui-default/components/autocomplete/components/AutoComplete.tsx

@@ -274,7 +274,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
   };
 
   return (
-    <div style={{ display: 'inline-block', width: '100%' }}>
+    <div style={{ display: 'inline-block', width: '100%', marginBottom: '1rem' }}>
       <div
         className={focused ? 'autocomplete-wrapper focused' : 'autocomplete-wrapper'}
         style={{ width, height }}