fix(userpicker): style & overflow issues (#3726)

Satellite-im · Jun 17, 2022 · 66ae68d · 66ae68d
1 parent 91cab25
commit 66ae68d
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 17 deletions.
diff --git a/components/interactables/Chip/Chip.vue b/components/interactables/Chip/Chip.vue
@@ -56,17 +56,25 @@ export default Vue.extend({
   .fa-times {
     cursor: pointer;
   }
+
   display: inline-flex;
   flex-shrink: 0;
   flex-direction: row;
   align-items: center;
   padding: @xlight-spacing;
   border-radius: @corner-rounding-xxlarge;
   color: white;
-  line-height: 0;
+  max-width: 100%;
+
+  .circle,
+  .delete-icon {
+    flex-shrink: 0;
+  }
 
   .text {
     margin: 0 0.125rem 0 @xlight-spacing;
+    &:extend(.ellipsis);
+    align-self: stretch;
   }
 
   &.size-small {

diff --git a/components/interactables/UserPicker/UserPicker.html b/components/interactables/UserPicker/UserPicker.html
@@ -15,19 +15,21 @@
     type="dark"
     :placeholder="$t('servers.create.select_friends_placeholder')"
   />
-  <UiSimpleScroll scrollMode="vertical" scrollShow="scroll"
-    ><TypographyText
-      v-if="!filteredFriends.length"
-      :text="$t('servers.create.user_picker_empty')"
-      class="empty-results-text"
-    />
-    <InteractablesUserPickerListItem
-      v-else
-      v-for="friend in filteredFriends"
-      :key="friend.address"
-      :friend="friend"
-      :selected="isSelected(friend)"
-      @click="toggle(friend)"
-    />
-  </UiSimpleScroll>
+  <div class="scroll-wrapper">
+    <UiSimpleScroll scrollMode="vertical" scrollShow="scroll">
+      <TypographyText
+        v-if="!filteredFriends.length"
+        :text="$t('servers.create.user_picker_empty')"
+        class="empty-results-text"
+      />
+      <InteractablesUserPickerListItem
+        v-else
+        v-for="friend in filteredFriends"
+        :key="friend.address"
+        :friend="friend"
+        :selected="isSelected(friend)"
+        @click="toggle(friend)"
+      />
+    </UiSimpleScroll>
+  </div>
 </div>
diff --git a/components/interactables/UserPicker/UserPicker.less b/components/interactables/UserPicker/UserPicker.less
@@ -1,5 +1,4 @@
 .user-picker {
-  height: 200px;
   display: flex;
   flex-direction: column;
   gap: @light-spacing;
@@ -18,4 +17,8 @@
     color: @gray;
     margin: @light-spacing;
   }
+
+  .scroll-wrapper {
+    height: 220px;
+  }
 }