Fix application layout tooltip overflow (#5134)

* Update overflow classes with new boolean class * Update package.json * Undo package.json semver update
canonical · Jun 13, 2024 · 2c51810 · 2c51810
1 parent c850b5d
commit 2c51810
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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>