From 056f4926f5f55882ccd5c4ef0766a9e5f35e9448 Mon Sep 17 00:00:00 2001
From: Helcostr <helcostr@gmail.com>
Date: Wed, 28 Apr 2021 14:07:07 -0700
Subject: [PATCH] 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)
---
 .../src/components/groups/membersModal.vue    |  2 +-
 .../client/src/components/ui/selectList.vue   | 39 ++++++++++++-------
 2 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/website/client/src/components/groups/membersModal.vue b/website/client/src/components/groups/membersModal.vue
index e97ebc5127..7adb7a2181 100644
--- a/website/client/src/components/groups/membersModal.vue
+++ b/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"
diff --git a/website/client/src/components/ui/selectList.vue b/website/client/src/components/ui/selectList.vue
index 7212ac5863..0e9230d178 100644
--- a/website/client/src/components/ui/selectList.vue
+++ b/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>