From 2c5181017c49884c2a1805e9fc738e5cd79a7010 Mon Sep 17 00:00:00 2001
From: pastelcyborg <168636120+pastelcyborg@users.noreply.github.com>
Date: Thu, 13 Jun 2024 12:11:24 +0100
Subject: [PATCH] Fix application layout tooltip overflow (#5134)

* Update overflow classes with new boolean class

* Update package.json

* Undo package.json semver update
---
 .../examples/layouts/application/JAAS.html    |  6 ++--
 .../examples/layouts/application/default.html | 16 +++++-----
 .../examples/layouts/application/split.html   | 32 +++++++++----------
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/templates/docs/examples/layouts/application/JAAS.html b/templates/docs/examples/layouts/application/JAAS.html
index 71d2057454..1d41356480 100644
--- a/templates/docs/examples/layouts/application/JAAS.html
+++ b/templates/docs/examples/layouts/application/JAAS.html
@@ -248,7 +248,7 @@ <h4 class="p-panel__title">Details for 192.168.255.254</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block">
                       <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div>
@@ -270,7 +270,7 @@ <h4 class="p-panel__title">Details for 192.168.255.254</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block">
                       <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div>
@@ -292,7 +292,7 @@ <h4 class="p-panel__title">Details for 192.168.255.254</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/testing">testing</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div>
diff --git a/templates/docs/examples/layouts/application/default.html b/templates/docs/examples/layouts/application/default.html
index d14eafc4ea..a9d52ffbe5 100644
--- a/templates/docs/examples/layouts/application/default.html
+++ b/templates/docs/examples/layouts/application/default.html
@@ -72,7 +72,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr0">
                       <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr0">Applications</span>
@@ -95,7 +95,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr3">
                       <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr3">Applications</span>
@@ -118,7 +118,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/testing">testing</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr6">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr6">Applications</span>
@@ -156,7 +156,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/canonical-kubernetes">canonical-kubernetes</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr9">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr9">Applications</span>
@@ -179,7 +179,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel">mymodel</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr12">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr12">Applications</span>
@@ -217,7 +217,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/group-test">group-test</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr15">
                       <div class="has-icon"><i class="p-icon--information"></i><span>9</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr15">Applications</span>
@@ -240,7 +240,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/new-search-aggregate">new-search-aggregate</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr18">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr18">Applications</span>
@@ -263,7 +263,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/unplaced">unplaced</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr21">
                       <div class="has-icon"><i class="p-icon--information"></i><span>5</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr21">Applications</span>
diff --git a/templates/docs/examples/layouts/application/split.html b/templates/docs/examples/layouts/application/split.html
index 15e62a1a3b..ddc7111970 100644
--- a/templates/docs/examples/layouts/application/split.html
+++ b/templates/docs/examples/layouts/application/split.html
@@ -81,7 +81,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr0">
                       <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr0">Applications</span>
@@ -104,7 +104,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr3">
                       <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr3">Applications</span>
@@ -127,7 +127,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/testing">testing</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr6">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr6">Applications</span>
@@ -165,7 +165,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/canonical-kubernetes">canonical-kubernetes</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr9">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr9">Applications</span>
@@ -188,7 +188,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel">mymodel</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr12">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr12">Applications</span>
@@ -226,7 +226,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/group-test">group-test</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr15">
                       <div class="has-icon"><i class="p-icon--information"></i><span>9</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr15">Applications</span>
@@ -249,7 +249,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/new-search-aggregate">new-search-aggregate</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr18">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr18">Applications</span>
@@ -272,7 +272,7 @@ <h4 class="p-panel__title">8 models: 3 blocked, 2 alerts, 3 running</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/unplaced">unplaced</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr21">
                       <div class="has-icon"><i class="p-icon--information"></i><span>5</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr21">Applications</span>
@@ -325,7 +325,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/hadoopspark">hadoopspark</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr0">
                       <div class="has-icon"><i class="p-icon--information"></i><span>11</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr0">Applications</span>
@@ -348,7 +348,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel4">mymodel4</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr3">
                       <div class="has-icon"><i class="p-icon--information"></i><span>7</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr3">Applications</span>
@@ -371,7 +371,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/testing">testing</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr6">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr6">Applications</span>
@@ -409,7 +409,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/canonical-kubernetes">canonical-kubernetes</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr9">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr9">Applications</span>
@@ -432,7 +432,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/gomboli@external/mymodel">mymodel</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr12">
                       <div class="has-icon"><i class="p-icon--information"></i><span>6</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr12">Applications</span>
@@ -470,7 +470,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/group-test">group-test</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr15">
                       <div class="has-icon"><i class="p-icon--information"></i><span>9</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr15">Applications</span>
@@ -493,7 +493,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/new-search-aggregate">new-search-aggregate</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr18">
                       <div class="has-icon"><i class="p-icon--information"></i><span>2</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr18">Applications</span>
@@ -516,7 +516,7 @@ <h4 class="p-panel__title">Aside panel</h4>
                 <td class="" data-test-column="name">
                   <div><a href="#/models/hatch@external/unplaced">unplaced</a></div>
                 </td>
-                <td class="u-overflow--visible" data-test-column="summary">
+                <td class="has-overflow" data-test-column="summary">
                   <div class="u-flex">
                     <div class="u-flex--block p-tooltip--top-center" aria-describedby="tp-cntr21">
                       <div class="has-icon"><i class="p-icon--information"></i><span>5</span></div><span class="p-tooltip__message" role="tooltip" id="tp-cntr21">Applications</span>