fix(catalogue): long variable names run over the box on the left hand side of the page showing a single variable

[EleanorHyde-UMCG]

What version of EMX2 are you using (see footer) v10.103.1

Describe the bug Not all long variable names are correctly split to fit into the box on the left hand side of the page displaying a single variable.

To Reproduce Steps to reproduce the behavior:

1. Go to https://data-catalogue.molgeniscloud.org/catalogue/ssr-catalogue/all/variables/biparietal_diam_sdsWHOEUR_t2-ATHLETE_CDM-outcome_ath-ATHLETE_CDM?keys={%22name%22:%22biparietal_diam_sdsWHOEUR_t2%22,%22resource%22:{%22id%22:%22ATHLETE_CDM%22},%22dataset%22:{%22name%22:%22outcome_ath%22,%22resource%22:{%22id%22:%22ATHLETE_CDM%22}}}
2. See that the variable name biparietal_diam_sdsWHOEUR_t2 is too long to fit in the box on the left hand side and runs over.
3. To compare, go to https://data-catalogue-acc.molgeniscloud.org/testCatalogue/ssr-catalogue/all/variables/testVarRep-with-looong-name_-testNetwork1_CDM-cdm_1-testNetwork1_CDM?keys={%22name%22:%22testVarRep-with-looong-name_%22,%22resource%22:{%22id%22:%22testNetwork1_CDM%22},%22dataset%22:{%22name%22:%22cdm_1%22,%22resource%22:{%22id%22:%22testNetwork1_CDM%22}}}
4. See that this variable name (testVarRep-with-looong-name_) IS split to fit into the box on the left hand side.

Expected behavior I would expect that long variable names are split to fit into this box regardless of whether they have underscores or dashes (or none).

Screenshots Not split:

Split (in acc):

Desktop (please complete the following information):

• OS: Windows 10
• Browser Chrome

[mswertz]

should we truncate (remove the bits that go out of the box) or we could enable css to break on any character?

[EleanorHyde-UMCG]

Let's enable css to break on any character. There's often important information at the end of a variable name which we mustn't lose.