group-menu
  a.md-button
    text-transform: none
    margin: 0
    line-height: 42px

.group-menu-join-button
  font-size: 0.8em

#group-menu-container
    width:100%
    max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    max-width: -moz-max-content;    /* Firefox/Gecko */
    max-width: -webkit-max-content; /* Chrome */

#group-menu-active-group
    text-align: right
    margin-left: 1em
    max-width: intrinsic;           /* Safari/WebKit uses a non-standard name */
    max-width: -moz-max-content;    /* Firefox/Gecko */
    max-width: -webkit-max-content; /* Chrome */
    text-overflow: ellipsis
    padding: 0em

#group-menu-group-picker
    text-align: left
    min-width: 50px
group-menu
  a.md-button
    text-transform: none
    margin: 0
    line-height: 42px

.group-menu-join-button
  font-size: 0.8em

#group-menu-container
    width:100%
    max-width: max-content;

#group-menu-active-group
    text-align: right
    margin-left: 1em
    max-width: max-content;
    text-overflow: ellipsis
    padding: 0em

#group-menu-group-picker
    text-align: left
    min-width: 50px

Set max-width property to max-content
Set max-width property to max-content

Ignore the "intrinsic" value for Safari, it's only mentioned in MDN, so
I suppose it's outdated (or soon, when Safari catches up with CSSv3).
