message: add 3 flex-shrink categories + make it work with overflow indicators
diff: @@ -14,15 +14,51 @@ See the License for the specific language governing permissions and
  limitations under the License.
  */
  +/* a word of explanation about the flex-shrink values employed here:
  + there are 3 priotized categories of screen real-estate grabbing,
  + each with a flex-shrink difference of 4 order of magnitude,
  + so they ideally wouldn't affect each other.
  + lowest category: .mx_RoomSubList
  + flex:-shrink: 10000000
  + distribute size of items within the same categery by their size
  + middle category: .mx_RoomSubList.resized-sized
  + flex:-shrink: 1000
  + applied when using the resizer, will have a max-height set to it,
  + to limit the size
  + highest category: .mx_RoomSubList.resized-all
  + flex:-shrink: 1
  + small flex-shrink value (1), is only added if you can drag the resizer so far
  + so in practice you can only assign this category if there is enough space.
  +*/
  +
  .mx_RoomSubList {
  min-height: 31px;
  - flex: 0 1 auto;
  + flex: 0 100000000 auto;
  display: flex;
  flex-direction: column;
  }
  .mx_RoomSubList_nonEmpty {
  - margin-bottom: 4px;
  + min-height: 76px;
  +
  + .mx_AutoHideScrollbar_offset {
  + padding-bottom: 4px;
  + }
  +}
  +
  +.mx_RoomSubList_hidden {
  + flex: none !important;
  +}
  +
  +.mx_RoomSubList.resized-all {
  + flex: 0 1 auto;
  +}
  +
  +.mx_RoomSubList.resized-sized {
  + /* resizer set max-height on resized-sized,
  + so that limits the height and hence
  + needs a very small flex-shrink */
  + flex: 0 10000 auto;
  }
  .mx_RoomSubList_labelContainer {
  @@ -105,13 +141,16 @@ limitations under the License.
  }
  .mx_RoomSubList_scroll {
  - /* let rooms list grab all available space */
  + /* let rooms list grab as much space as it needs (auto),
  + potentially overflowing and showing a scrollbar */
  flex: 0 1 auto;
  padding: 0 8px;
  }
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before,
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
  +// overflow indicators
  +.mx_RoomSubList:not(.resized-all) > .mx_RoomSubList_scroll {
  + &.mx_IndicatorScrollbar_topOverflow::before,
  + &.mx_IndicatorScrollbar_bottomOverflow::after {
  position: sticky;
  left: 0;
  right: 0;
  @@ -122,23 +161,23 @@ limitations under the License.
  pointer-events: none;
  }
  -
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
  + &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
  margin-top: -40px;
  }
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
  + &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
  margin-bottom: -40px;
  }
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_topOverflow::before {
  + &.mx_IndicatorScrollbar_topOverflow::before {
  top: 0;
  background: linear-gradient($secondary-accent-color, transparent);
  }
  -.mx_RoomSubList_scroll.mx_IndicatorScrollbar_bottomOverflow::after {
  + &.mx_IndicatorScrollbar_bottomOverflow::after {
  bottom: 0;
  background: linear-gradient(transparent, $secondary-accent-color);
  }
  +}
  .collapsed {
  