Add title attributes in useful places, fix Chant-by-Cantus-ID page formatting

[jacobdgm]

This PR does two main things:

• Where we display the .names of Genres and Offices (i.e. the abbreviations for these objects), it adds title="" attributes to these elements, so that the .description of the Genre/Office (i.e. the full name of the object) is displayed upon mouseover.
  • I haven't made an effort to do this in places where concordances are being displayed; the information we get from CantusIndex is not set up for these to be added without lots of extra code being written
  • Neither have I made an effort to add these to sidebars - I've only done it in the main panel for each view
• In tables where we leave an empty column header or use an abbreviation, include title attributes to all column headers spelling out what the columns mean (e.g. in several places, we just leave empty column headers instead of writing out "Genre" or "Office", in order to save space. We also use "Mel" instead of "Volpiano Melody" and "Image" instead of "Image Link")

Along the way, I discovered that on the Chant-by-Cantus-ID page, we were displaying the string representation of chants' offices rather than their abbreviation. This caused this property to be quite out-of-proportion compared to how OldCantus renders this information. This PR fixes this.

OldCantus:

NewCantus, previously:

NewCantus, now: