2714 & 3817: Fix tooltip layout with long lines

[toni-sharpe]

Description

• Fixes: Tooltip content not nicely formatted when variable name is long and a time notice is displayed #2714 long line length - note that I think these will still wrap as the only change is the date nowrap addition.
• This will be why I opted for vw unit to minimise the long line outcome.
• The same line fixes the problem Lucas was having in Tooltip layout in chart looks slightly off #3817: wrapping dates.

[OUT OF DATE]

[toni-sharpe]

@danyx23 hello :-)

The new tag and system underneath (which addressed my concern here) is great, but I noitice this PR doesn't have it applied?

Perhaps it could auto-apply if the contribution is not part of some team, or, the contriubutor could have access to add it themselves?

@lucasrodes @sophiamersmann tagged as you raised the two issues I think I fixed with this PR

[sophiamersmann]

Thank you for the fix! I think adding nowrap to the time notice cell should be all that is needed here.

• changed 400px to 80vw which is more responsive anyway, but was also needed to catch longer rows with dates

Can you change this back to 400px? Using a fixed width makes more sense here.

• white-space: nowrap kept the date from breaking line

This works well!

• combining the swatch colour with name avoided the problem with <table /> guessing at widths which made a huge gap between swatch and name

I'm not sure what you mean, but the changes mess with the layout of the "Total" row. Can you please revert?

[toni-sharpe]

@sophiamersmann - hello, hope you're well, and no problem, I'm one of the not so common ones that enjoys CSS.

re: "combining the swatch colour .... huge gap between swatch and name" - this was occuring in cases where my change to 80vw made the table much wider, below is an example:

But fixing it to 400px again stops this issue. I would normally avoid the fixed width, but in this case I can't bring to mind what my reasoning was for changing it, reverted, along with the "fix" I had to apply with it. Both pushed for re-review. Well spotted.

Curious: where is the total row? What did the mess up look like? No expectations.

Finally: for the meaning of "swatch"

Picking carpets, paint, etc.

[sophiamersmann]

I can see that you reverted the commits, but somehow, the changes still show up in the diff. Once that's sorted, I'm happy to merge.

---

This is how the formatting of the total row changed:

What it should be	What it looked like

[toni-sharpe]

@sophiamersmann not sure I'm even seeing that row (unless it's being used for the additional info bit, as this uses % and 100% is implied by that):

But I can see that git revert hasn't undone the commits as I expected, the code itself hasn't changed.

I'll get this sorted later today (have to go out) but well beyond business hours.

[toni-sharpe]

@sophiamersmann this should now be done (though I have not tested in your issue's context)

You now have one commit that applies nowrap to fix dates.

With your issue I assume it was just the date wrapping? Without testing, it should now have a flat date and wrapped text in the box. My 80vw decision will have been for the text too. This is out of scope unless the text also is to be fixed.

[sophiamersmann]

Thank you!