From 2ea69624af7d3e226996c77e065a50ad5df81b4d Mon Sep 17 00:00:00 2001
From: Luke Barnard <lukeb@openmarket.com>
Date: Wed, 28 Jun 2017 16:36:32 +0100
Subject: [PATCH] Add some style improvements to autocompletions

 - Fix https://github.com/vector-im/riot-web/issues/2230 by adding text-overflow: ellipsis to pill spans
 - Add padding to pills
 - Make sure to only apply horizontal margin of pill children at one level of the DOM tree
---
 .../views/rooms/_Autocomplete.scss                 | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
index 062dd0bad..704b3aa99 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_Autocomplete.scss
@@ -38,6 +38,7 @@
 .mx_Autocomplete_Completion_pill {
     border-radius: 17px;
     height: 34px;
+    padding: 0px 5px;
     display: flex;
     user-select: none;
     cursor: pointer;
@@ -45,10 +46,21 @@
     color: $primary-fg-color;
 }
 
-.mx_Autocomplete_Completion_pill * {
+.mx_Autocomplete_Completion_pill > * {
     margin: 0 3px;
 }
 
+.mx_Autocomplete_provider_name,
+.mx_Autocomplete_Completion_title,
+.mx_Autocomplete_Completion_subtitle,
+.mx_Autocomplete_Completion_description {
+    /* Ellipsis for long names/subtitles/descriptions*/
+    max-width: 150px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* container for pill-style completions */
 .mx_Autocomplete_Completion_container_pill {
     margin: 12px;