Tooltip gets clipped, causes flickering scroll behavior

This is a followup issue on #7431. The relevant code is here.

Observed behavior

When editing a quiz (“coach --> plan --> quizzes --> <quiz>”) with missing content in a narrow window, the missing content icon appears on a new line, causing a vertical scrollbar to appear.

The tooltip sometimes gets clipped, and hovering over the missing content icon results in strange flickering.

Expected behavior

The missing content icon (“⚠️”) should not break to a new line; The tooltip should not clip and there should be no scrollbar and no flickering.

User-facing consequences

It’s distracting and potentially jarring or worrisome (“⚠️”) for anyone trying to figure out what’s going on.

Steps to reproduce

1. Import a facility with a classroom+quiz to a blank Kolibri instance with no content data.
2. Edit the quiz (“coach --> plan --> quizzes --> <quiz>”)
3. Make the browser window narrow until one of the “⚠️” icons breaks to a new line
4. Hover over the icon

Context

This happened with Kolibri 0.14beta15 with #7431 applied. As soon as that PR is merged, you should be able to reproduce this on the release-v0.14.x branch

It happens both on Firefox and Chromium

[nucleogenesis]

The newline break may be either caused or fixed by using a KLabledIcon with the iconAfter prop. If the wrapping component has a width set on it, a KLabeledIcon would fill the space

https://github.com/learningequality/kolibri-design-system/blob/704fbb08002771856f64360164469267bf3405ed/lib/KLabeledIcon.vue#L21

[rtibbles]

Super! Closing.