Adapt to size changes when displaying tooltips

What does this MR do and why?

Adapt to size changes when displaying tooltips

This change updates the "tooltip-on-truncate" component to respond to changes in the component size.

Previously the component was only detected as overflowing once and didn't respond to changes in its size.

Changelog: changed

Update specs

Most specs have been updated to use async/await syntax.

How does it work?

We leverage the v-gl-resize-observer directive to respond to changes in size that could lead to truncations in content. This detection is denounced to 500ms, so the tooltip is not recalculated frequently.

As an additional improvement, the component is not re-rendered using v-if when the tooltip toggles or text changes, instead the tooltip is disabled via the disabled flag provided by the v-gl-tooltip directive.

Screenshots or screen recordings

How to set up and validate locally

An an example, we can take the runners' admin page, in which the IP and runner version use TooltipOnTruncate:

1. Visit the runners' admin page e.g. http://gdk.test:3000/admin/runners
2. Display a runner with a long version and/or IP
3. Reducing the size of your screen my help

The following diff will allow you to test with mock values of any length:

diff --git a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
index 3edb658eaf5..afd707ce44d 100644
--- a/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/runner/admin_runners/admin_runners_app.vue
@@ -88,8 +88,18 @@ export default {
       },
       update(data) {
         const { runners } = data;
+
+        const items =
+          runners?.nodes.map(({ ipAddress, version, ...runner }) => {
+            return {
+              ipAddress: '2a02:a210:2147:00:459d:3742:74c8:ca',
+              version: '14.5.0-nightly-beta-1.000.000.000',
+              ...runner,
+            };
+          }) || [];
+
         return {
-          items: runners?.nodes || [],
+          items,
           pageInfo: runners?.pageInfo || {},
         };
       },

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Related to #343977 (closed)