fix(tasks): icons and select lists

website/client/src/components/tasks/approvalFooter.vue

@@ -44,7 +44,7 @@
     >
       <div
         v-if="assignedUsersCount > 0"
-        class="svg-icon icon-16 ml-2 users-icon color"
+        class="svg-icon ml-2 users-icon color"
         :class="{'green-10': completionsCount === assignedUsersCount}"
         v-html="icons.users"
       ></div>
@@ -210,7 +210,7 @@
   }
 
   .users-icon {
-    margin-top: -1px;
+    width: 16px;
   }
 </style>
 
@@ -220,7 +220,7 @@ import reduce from 'lodash/reduce';
 import { mapState } from '@/libs/store';
 import checkIcon from '@/assets/svg/check.svg';
 import lockIcon from '@/assets/svg/lock.svg';
-import usersIcon from '@/assets/svg/icon-users.svg';
+import usersIcon from '@/assets/svg/users.svg';
 import lastComplete from '@/assets/svg/last-complete.svg';
 
 export default {

website/client/src/components/tasks/modal-controls/multiList.vue

@@ -4,16 +4,16 @@
     :class="{ 'break': maxItems === 0 }"
   >
     <template v-if="items.length === 0">
-      <div class="items-none">
+      <div class="items-none mb-1">
         {{ emptyMessage }}
       </div>
     </template>
     <template v-else>
       <div
-        v-for="item in truncatedSelectedItems"
+        v-for="item in items"
         :key="item.id"
         :title="item.name"
-        class="multi-item mr-1 d-inline-flex align-items-center"
+        class="multi-item mr-1 mb-1 d-inline-flex align-items-center"
         :class="{'margin-adjust': maxItems !== 0, 'pill-invert': pillInvert}"
 
         @click.stop="removeItem($event, item)"
@@ -27,12 +27,6 @@
           v-html="icons.remove"
         ></div>
       </div>
-      <div
-        v-if="remainingSelectedItems.length > 0"
-        class="items-more ml-75"
-      >
-        +{{ remainingSelectedItems.length }}
-      </div>
     </template>
   </div>
 </template>

website/client/src/components/tasks/modal-controls/selectMulti.vue

@@ -29,6 +29,7 @@
       </b-dropdown-header>
       <template v-slot:button-content>
         <multi-list
+          class="d-flex flex-wrap"
           :items="selectedItemsAsObjects"
           :add-new="addNew"
           :pill-invert="pillInvert"
@@ -85,6 +86,13 @@
 
 $itemHeight: 2rem;
 
+.inline-dropdown {
+  &.select-multi .dropdown-toggle {
+    height: auto;
+    padding-bottom: 0px;
+  }
+}
+
 .select-multi {
   .dropdown-toggle {
     padding-left: 0.75rem;