selList overflow (#13179)

* Limit `membersModal` list selector to 12-unit grid (to prevent wrap around on long text for `sortOptions`)
* Add ellipse based overflow for `membersModal` list selector
* Add padding so that the checkmark for `membersModal` list doesn't overlap with text
* Use scss with v-deep properly (also pretty checkmark to "full-width" of checkmark)

website/client/src/components/groups/membersModal.vue

@@ -42,7 +42,7 @@
               :placeholder="$t('search')"
             >
           </div>
-          <div class="col">
+          <div class="col-5">
             <select-list
               :items="sortOptions"
               :value="optionEntryBySelectedValue"

website/client/src/components/ui/selectList.vue

@@ -53,8 +53,16 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .select-list ::v-deep .selectListItem {
+  .select-list ::v-deep {
+    .dropdown-toggle {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .selectListItem {
       position: relative;
+      padding-right: 1.625rem;
 
       &:not(.showIcon) {
         .svg-icon.check-icon {
@@ -72,6 +80,7 @@
         color: $purple-300;
       }
     }
+  }
 </style>
 
 <script>