workflow toolbar: improve for narrower viewports

[oliver-sanders]

Update: this has been fixed, see discussion below for more possible improvements

Long workflow IDs should be truncated to ensure the information on the right of the toolbar remains visible.

Unfortunately with really long workflow IDs this is not always the case:

Sometimes the status string gets broken onto multiple lines. Sometimes the control icons, status string & add-view button are all pushed off the toolbar completely.

---

Related to this we could look at reducing directory names e.g. turn foo/bar/baz/pub into f/b/b/pub when there is not enough space for the full name.

Note: The full ID of the workflow can be obtained by clicking on the mutation button.

Pull requests welcome! This is an Open Source project - please consider contributing a bug fix yourself (please read CONTRIBUTING.md before starting any work though).

[MetRonnie]

Is there a reason not to allow the title to wrap onto another line (so the toolbar occupies more height)?

[hjoliver]

Truncation would look a lot nicer. We could supply the full name in a tooltip?

[oliver-sanders]

Wrapping onto multiple lines would be ugly and require vertical expansion of the toolbar which would cut into the workflow workspace on smaller screens. The full ID is be available via the mutation menu.

(note we should try to avoid on-hover tooltips as they are not mobile friendly, on-tap/click are ok but are typically used with a button style icon to make it clear they are interactive).

[MetRonnie]

A problem with the current toolbar height is it really doesn't show much of the name at all on mobile (and this is after I've reduced the font size of the name):

This can be partially remedied by hiding the status on narrow viewports and making it available in the mutation menu

[oliver-sanders]

The original idea for mobile was to break the toolbar over multiple lines: https://github.com/cylc/cylc-ui/issues/87

(note the mobile view here does not support lumino tabs, you can only open one view at a time)

[MetRonnie]

If we want to make the ellipsis happen in the middle of the workflow name, rather than the end, this is a useful trick: https://css-tricks.com/using-flexbox-and-text-ellipsis-together/

[MetRonnie]

This has mostly been fixed by #967, though there are still some enhancements that could be made as discussed in the thread. Changing the title and bumping to a later milestone