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,23 +53,32 @@
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
 
-  .select-list ::v-deep .selectListItem {
-    position: relative;
-
-    &:not(.showIcon) {
-      .svg-icon.check-icon {
-        display: none;
-      }
+  .select-list ::v-deep {
+    .dropdown-toggle {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
-    .svg-icon.check-icon.color {
-      position: absolute;
-      right: 0.855rem;
-      top: 0.688rem;
-      bottom: 0.688rem;
-      width: 0.77rem;
-      height: 0.615rem;
-      color: $purple-300;
+    .selectListItem {
+      position: relative;
+      padding-right: 1.625rem;
+
+      &:not(.showIcon) {
+        .svg-icon.check-icon {
+          display: none;
+        }
+      }
+
+      .svg-icon.check-icon.color {
+        position: absolute;
+        right: 0.855rem;
+        top: 0.688rem;
+        bottom: 0.688rem;
+        width: 0.77rem;
+        height: 0.615rem;
+        color: $purple-300;
+      }
     }
   }
 </style>