feat: add tooltip to storage volumes (#15245)

* feat: add tooltip to storage volumes

* chore: move Tooltip into td to preserve style

* styling: add overflow-x to section (#15246)

* styling: add overflow-x to section

* refact: use media query with display block

ui/app/styles/core/table.scss

@@ -7,6 +7,11 @@
   border-collapse: separate;
   width: 100%;
 
+  @media #{$mq-table-overflow} {
+    display: block;
+    overflow-x: auto;
+  }
+
   &.is-fixed {
     table-layout: fixed;
 

ui/app/styles/core/variables.scss

@@ -46,6 +46,7 @@ $breadcrumb-item-active-color: $white;
 $breadcrumb-item-separator-color: $primary;
 
 $mq-hidden-gutter: 'only screen and (max-width : 960px)';
+$mq-table-overflow: 'only screen and (max-width : 1100px)';
 
 $timing-fast: 150ms;
 $timing-medium: 300ms;

ui/app/templates/csi/volumes/index.hbs

@@ -77,13 +77,15 @@
                 action=(action "gotoVolume" row.model)
               }}
             >
-              <LinkTo
-                @route="csi.volumes.volume"
-                @model={{row.model.idWithNamespace}}
-                class="is-primary"
-              >
-                {{row.model.name}}
-              </LinkTo>
+              <Tooltip @text={{row.model.plainId}}>
+                <LinkTo
+                  @route="csi.volumes.volume"
+                  @model={{row.model.idWithNamespace}}
+                  class="is-primary"
+                >
+                  {{row.model.name}}
+                </LinkTo>
+              </Tooltip>
             </td>
             {{#if this.system.shouldShowNamespaces}}
               <td data-test-volume-namespace>