(css) Improve autocompletion menu

UI/WebServerResources/scss/components/autocomplete/autocomplete.scss

@@ -1 +1,8 @@
 @import "extends";
+
+@media (max-width: $layout-breakpoint-sm) {
+  // Enlarge the autocompletion menu on small devices to fit the entire screen
+  .md-autocomplete-suggestions-container {
+    right: $baseline-grid*2;
+  }
+}

UI/WebServerResources/scss/components/chips/chips.scss

@@ -1,8 +1,8 @@
 /// chips.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
 @import 'extends';
 
-// Remove the line under the tags of the message viewer
 md-chips {
+  // Remove the line under the tags of the message viewer
   &.sg-readonly {
     .md-chips {
       box-shadow: none;
@@ -16,6 +16,18 @@ md-chips {
   }
 }
 
+// Enlarge the default autocompletion menu
 .sg-chips-autocomplete {
   width: (3 * $contact-chip-name-width);
+}
+
+// In the autocompletion menu, don't limit the contact name to a fixed width
+// and show the email address right after it
+.md-contact-suggestion {
+  .md-contact-name {
+    width: auto;
+  }
+  .md-contact-email {
+    margin-left: $contact-chip-suggestion-margin;
+  }
 }