Guild textarea at list positioning (#10663)

* autocomplete dialog now has ternary operator to determine placement

* added min height to textbox

* fixed spacing according to travisCI

* heightToUse function now retrieves argument from props

website/client/components/chat/autoComplete.vue

@@ -14,7 +14,7 @@ div.autocomplete-selection(v-if='searchResults.length > 0', :style='autocomplete
 import groupBy from 'lodash/groupBy';
 
 export default {
-  props: ['selections', 'text', 'coords', 'chat'],
+  props: ['selections', 'text', 'coords', 'chat', 'textbox'],
   data () {
     return {
       currentSearch: '',
@@ -25,9 +25,15 @@ export default {
   },
   computed: {
     autocompleteStyle () {
+      function heightToUse (textBox, topCoords) {
+        let textBoxHeight = textBox['user-entry'].clientHeight;
+        return topCoords < textBoxHeight ? topCoords + 30 : textBoxHeight + 10;
+      }
       return {
-        top: `${this.coords.TOP + 30}px`,
+        top: `${heightToUse(this.textbox, this.coords.TOP)}px`,
         left: `${this.coords.LEFT + 30}px`,
+        marginLeft: '-28px',
+        marginTop: '28px',
         position: 'absolute',
         minWidth: '100px',
         minHeight: '100px',
@@ -42,6 +48,7 @@ export default {
         return option.toLowerCase().indexOf(currentSearch.toLowerCase()) !== -1;
       });
     },
+
   },
   mounted () {
     this.grabUserNames();