-
This functionality should work on any screen size and when the screen is resized. For simplicity, this will only be tested in a recent version of a Chromium browser.
-
If all the recipient email addresses fit in the available space, we can simply display them delimited by a comma and space (e.g.
a, b). -
When there is not enough space to display all recipients, we trim the text. However, to prevent showing clipped email addresses that are hard to read, we trim entire email addresses. If we cannot fit the entirety of a recipient email address, it shouldn’t be shown at all.
-
When at least one recipient is trimmed, we put a comma, space, and ellipsis after the last fitting recipient (e.g.
a, b, ...). Furthermore, the rightmost end of the column should show a “badge” with the number of trimmed recipients (+N). -
If there is not enough space to show even the first recipient, the badge should show the number of trimmed recipients excluding the first recipient, and the recipient should be truncated with an ellipsis only. If there is only one recipient, there will be no badge, and the recipient should still be truncated by an ellipsis.
Trim recipients that do not fit in the column. Show , ... after the last fitting recipient and a badge with +N at the end of the column.
If there is not enough space to show the ellipsis and the extra space, trim that recipient as well.
If there is not enough space to show the first recipient, the badge should show the number of trimmed recipients excluding the first recipient, and the recipient should be truncated with an ellipsis only. If there is only one recipient, there should be no badge.
Measurements
- Font size: 16px
- Foreground color: #f0f0f0
- Background color: #666666
- Border radius: 3px
- Top padding: 2px
- Bottom padding: 2px
- Left padding: 5px
- Right padding: 5px
- Font size: 16px
- Foreground color: #333333
- Top padding: 5px
- Bottom padding: 5px
- Left padding: 10px
- Right padding: 10px