diff --git a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss b/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss index f5bd731ef..becdb800a 100644 --- a/UI/WebServerResources/scss/components/autocomplete/autocomplete.scss +++ b/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; + } +} \ No newline at end of file diff --git a/UI/WebServerResources/scss/components/chips/chips.scss b/UI/WebServerResources/scss/components/chips/chips.scss index 1f07ce437..281882e73 100644 --- a/UI/WebServerResources/scss/components/chips/chips.scss +++ b/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; + } } \ No newline at end of file