FIX: better left/right positioning in select-kit components (#6824)

app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6

@@ -192,29 +192,43 @@ export default Ember.Mixin.create({
         : windowWidth;
       const bodyWidth = this._computedStyle(this.$body()[0], "width");
 
-      let marginToEdge;
+      let spaceToLeftEdge;
       if (this.$scrollableParent().length) {
-        marginToEdge =
+        spaceToLeftEdge =
           this.$().offset().left - this.$scrollableParent().offset().left;
       } else {
-        marginToEdge = this.get("element").getBoundingClientRect().left;
+        spaceToLeftEdge = this.get("element").getBoundingClientRect().left;
       }
 
-      const enoughMarginToOppositeEdge =
+      let isLeftAligned = true;
-        parentWidth - marginToEdge - bodyWidth + this.get("horizontalOffset") >
+      const spaceToRightEdge = parentWidth - spaceToLeftEdge;
-        0;
+      const elementWidth = this.get("element").getBoundingClientRect().width;
-      if (enoughMarginToOppositeEdge) {
+      if (spaceToRightEdge > spaceToLeftEdge + elementWidth) {
+        isLeftAligned = false;
+      }
+
+      if (isLeftAligned) {
         this.$()
           .addClass("is-left-aligned")
           .removeClass("is-right-aligned");
-        options.left = this.get("horizontalOffset");
+
-        options.right = "unset";
+        if (this._isRTL()) {
+          options.right = this.get("horizontalOffset");
+        } else {
+          options.left =
+            -bodyWidth + elementWidth - this.get("horizontalOffset");
+        }
       } else {
         this.$()
           .addClass("is-right-aligned")
           .removeClass("is-left-aligned");
-        options.left = "unset";
+
-        options.right = this.get("horizontalOffset");
+        if (this._isRTL()) {
+          options.right =
+            -bodyWidth + elementWidth - this.get("horizontalOffset");
+        } else {
+          options.left = this.get("horizontalOffset");
+        }
       }
     }