FIX: various sizing issues on select-kit

app/assets/javascripts/select-kit/components/multi-select/selected-name.js.es6

@@ -10,7 +10,7 @@ export default Ember.Component.extend({
   classNames: ["selected-name", "choice"],
   classNameBindings: ["isHighlighted", "isLocked"],
   layoutName: "select-kit/templates/components/multi-select/selected-name",
-  tagName: "li",
+  tagName: "span",
   tabindex: -1,
 
   @computed("content")

app/assets/javascripts/select-kit/components/select-kit.js.es6

@@ -72,7 +72,7 @@ export default Ember.Component.extend(UtilsMixin, PluginApiMixin, DomHelpersMixi
     this.set("rowComponentOptions", Ember.Object.create());
     this.set("computedContent", []);
 
-    if ((this.site && this.site.isMobileDevice) || $(window).outerWidth(false) <= 420) {
+    if (this.site && this.site.isMobileDevice) {
       this.setProperties({ filterable: false, autoFilterable: false });
     }
 

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

@@ -105,23 +105,23 @@ export default Ember.Mixin.create({
     const dHeader = $(".d-header")[0];
     const dHeaderBounds = dHeader ? dHeader.getBoundingClientRect() : {top: 0, height: 0};
     const dHeaderHeight = dHeaderBounds.top + dHeaderBounds.height;
-    const componentHeight = this.$().outerHeight(false);
+    const bodyHeight = this.$body()[0].getBoundingClientRect().height;
-    const componentWidth = this.$().outerWidth(false);
-    const bodyHeight = this.$body().outerHeight(false);
     const windowWidth = $(window).width();
     const windowHeight = $(window).height();
     const boundingRect = this.get("element").getBoundingClientRect();
+    const componentHeight = boundingRect.height;
+    const componentWidth = boundingRect.width;
     const offsetTop = boundingRect.top;
     const offsetBottom = boundingRect.bottom;
 
-    if (this.get("fullWidthOnMobile") && windowWidth <= 420) {
+    if (this.get("fullWidthOnMobile") && (this.site && this.site.isMobileDevice)) {
       const margin = 10;
       const relativeLeft = this.$().offset().left - $(window).scrollLeft();
       options.left = margin - relativeLeft;
       options.width = windowWidth - margin * 2;
       options.maxWidth = options.minWidth = "unset";
     } else {
-      const bodyWidth = this.$body().outerWidth(false);
+      const bodyWidth = this.$body()[0].getBoundingClientRect().width;
 
       if ($("html").css("direction") === "rtl") {
         const horizontalSpacing = boundingRect.right;
@@ -151,10 +151,10 @@ export default Ember.Mixin.create({
     const hasAboveSpace = offsetTop - fullHeight - dHeaderHeight > 0;
     if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
       this.setProperties({ isBelow: true, isAbove: false });
-      options.top = componentHeight + this.get("verticalOffset") - 2;
+      options.top = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset");
     } else {
       this.setProperties({ isBelow: false, isAbove: true });
-      options.bottom = componentHeight + this.get("verticalOffset") - 1;
+      options.bottom = this.$header()[0].getBoundingClientRect().height + this.get("verticalOffset");
     }
 
     this.$body().css(options);
@@ -166,8 +166,9 @@ export default Ember.Mixin.create({
     const scrollableParent = this.$().parents(this.get("scrollableParentSelector"));
     if (scrollableParent.length === 0) { return; }
 
-    const width = this.$().outerWidth(false);
+    const boundingRect = this.get("element").getBoundingClientRect();
-    const height = this.$().outerHeight(false);
+    const width = boundingRect.width;
+    const height = boundingRect.height;
     const $placeholder = $(`<div class='select-kit-fixed-placeholder-${this.elementId}'></div>`);
 
     this._previousScrollParentOverflow = this._previousScrollParentOverflow || scrollableParent.css("overflow");
@@ -222,11 +223,11 @@ export default Ember.Mixin.create({
   },
 
   _positionWrapper() {
-    const componentHeight = this.$().outerHeight(false);
+    const headerBoundingRect = this.$header()[0].getBoundingClientRect();
 
     this.$(this.wrapperSelector).css({
-      width: this.$().outerWidth(false) - 2,
+      width: this.get("element").getBoundingClientRect().width,
-      height: componentHeight + this.$body().outerHeight(false)
+      height: headerBoundingRect.height + this.$body()[0].getBoundingClientRect().height
     });
   },
 });

app/assets/javascripts/select-kit/templates/components/multi-select/multi-select-header.hbs

@@ -1,13 +1,13 @@
-<ul class="choices">
+<div class="choices">
   {{#each computedContent.selectedComputedContents as |selectedComputedContent|}}
     {{component selectedNameComponent onDeselect=onDeselect content=selectedComputedContent}}
   {{/each}}
-  <li class="filter choice" tabindex="-1">
+  <span class="filter choice" tabindex="-1">
     {{component "select-kit/select-kit-filter"
       onFilter=onFilter
       shouldDisplayFilter=shouldDisplayFilter
       isFocused=isFocused
       filter=filter
     }}
-  </li>
+  </span>
-</ul>
+</div>

app/assets/javascripts/select-kit/templates/components/multi-select/selected-name.hbs

@@ -1,13 +1,13 @@
-<span class="name">
+{{#if isLocked}}
-  {{#if isLocked}}
   <span class="delete-icon">
     {{d-icon "lock"}}
   </span>
-  {{else}}
+{{else}}
   <span class="locked-icon" {{action onDeselect content bubbles=false}}>
     {{d-icon "times"}}
   </span>
-  {{/if}}
+{{/if}}
 
+<span class="name">
   {{content.name}}
 </span>

app/assets/stylesheets/common/select-kit/category-selector.scss

@@ -0,0 +1,9 @@
+.select-kit, .select-kit-box {
+  .selected-name  {
+    .badge-wrapper {
+      display: inline-flex;
+      align-items: center;
+      line-height: inherit;
+    }
+  }
+}

app/assets/stylesheets/common/select-kit/combo-box.scss

@@ -72,7 +72,7 @@
       }
 
       .select-kit-body {
-        border-radius: 3px 3px 0 0;
+        border-radius: 0 0 3px 3px ;
       }
     }
 
@@ -80,6 +80,10 @@
       .select-kit-header {
         border-radius: 0 0 3px 3px;
       }
+
+      .select-kit-body {
+        border-radius: 3px 3px 0 0;
+      }
     }
   }
 }

app/assets/stylesheets/common/select-kit/multi-select.scss

@@ -2,7 +2,6 @@
   &.multi-select {
     width: 300px;
     background: $secondary;
-    border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
     border-radius: 0;
 
     .select-box-kit-body, .select-kit-body {
@@ -22,6 +21,7 @@
 
     .multi-select-header {
       background: $secondary;
+      border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
 
       &.is-focused {
         box-shadow: $tertiary 0px 0px 6px 0px;
@@ -63,23 +63,23 @@
     }
 
     .choices {
-      list-style: none;
       margin: 0;
-      padding: 5px;
+      padding: 2.5px;
       box-sizing: border-box;
-      display: inline;
+      display: inline-flex;
-      list-style-type: none;
+      justify-content: flex-start;
+      flex-wrap: wrap;
 
       .choice {
         display: inline-flex;
         box-sizing: border-box;
         padding: 0 5px;
-        margin: 2px 0;
         border: 1px solid transparent;
         align-items: center;
         justify-content: space-between;
-        overflow: hidden;
+        flex-wrap: wrap;
-        align-items: center;
+        flex-direction: row;
+        margin: 2.5px;
       }
 
       .filter {
@@ -136,9 +136,10 @@
         background-color: $primary-low;
         cursor: pointer;
         outline: none;
-        padding-left: 0;
-        padding-right: 0;
         line-height: normal;
+        overflow: auto;
+        flex: unset;
+        flex-wrap: nowrap;
 
         .name {
           padding: 0 5px;

app/assets/stylesheets/common/select-kit/select-kit.scss

@@ -3,9 +3,10 @@
 }
 
 .select-box-kit, .select-kit {
-  border: 1px solid transparent;
+  border: none;
   min-width: 220px;
   -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
           box-sizing: border-box;
   display: inline-block;
   -webkit-box-orient: vertical;
@@ -223,6 +224,7 @@
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    box-sizing: border-box;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;