Enhance Compartment Labels

[NXXR]

Compartment Labels are currently very limited in length th avoid wrapping.
(A second line was introduced by #271 to separate the test and vaccination glyphs from the compartment name/infection state)

We should enhance the Compartment label display to make it more robust for the upcoming compartment filters (#58 ).
The label could be split into two parts: the name (blue) and the glyphs (yellow)

On long names the overflow would be omitted by and ellipsis (...) to avoid wrapping.
A tooltip would be added to display the full name on hover.

The tooltip could also be filled with a description (for compartment filters) that can be set by the user.
Additional explanation or info e.g. regarding the infection state, source of the number, or criteria what makes a subject part of this compartment could also be displayed.

Additionally, if we can find meaningful glyphs or abbreviations for the infection states, the glyph section of the compartment could become an 'at-a-glance' summary of what the compartment consists of (for basic compartment filters and default compartments).

---

Technical Notes:

The HTML tooltip is done by wrapping the ListItemText-Element that displays the compartment name with a Tooltip-Element and settint the title-prop to a React.Fragment:

<Tooltip
  title={
    <React.Fragment>
      <Typography color="inherit">Non-Symptomatic</Typography>
      🧪 - Tested/Confirmed Cases<br/>
      💉💉 - Vaccinated Twice<br/>
      <br/>
      <em><b>Non-Symptomatic</b></em> Cases are Infected People who do not show any symptoms.<br/>
      However, they are <b>still infectious</b> and able to spread the disease to healthy people.
    </React.Fragment>
  }
>
  <ListItemText
    ...
  />
</Tooltip>

[KleinAn]

I think a detail description of the labels is relevant for every infection state.

[NXXR]

The compartments have changed (simplified) since the issue was created.
Descriptions can be added to the Compartments, text needs to be supplied by @KleinAn.