Long cluster names overlap in PVC card

src/routes/components/cluster/cluster.tsx

@@ -4,7 +4,9 @@ import messages from 'locales/messages';
 import React from 'react';
 import type { WrappedComponentProps } from 'react-intl';
 import { injectIntl } from 'react-intl';
+import { getResizeObserver } from 'routes/components/charts/common/chartUtils';
 import { getComputedReportItems } from 'routes/utils/computedReport/getComputedReportItems';
+import { noop } from 'routes/utils/noop';
 
 import { styles } from './cluster.styles';
 import { ClusterModal } from './modal/clusterModal';
@@ -20,14 +22,18 @@ interface ClusterOwnProps {
 interface ClusterState {
   isOpen?: boolean;
   showAll?: boolean;
+  width?: number;
 }
 
 type ClusterProps = ClusterOwnProps & WrappedComponentProps;
 
 class ClusterBase extends React.Component<ClusterProps, ClusterState> {
+  private containerRef = React.createRef<HTMLDivElement>();
+  private observer: any = noop;
   protected defaultState: ClusterState = {
     isOpen: false,
     showAll: false,
+    width: 0,
   };
   public state: ClusterState = { ...this.defaultState };
 
@@ -37,6 +43,16 @@ class ClusterBase extends React.Component<ClusterProps, ClusterState> {
     this.handleOpen = this.handleOpen.bind(this);
   }
 
+  public componentDidMount() {
+    this.observer = getResizeObserver(this.containerRef?.current, this.handleResize);
+  }
+
+  public componentWillUnmount() {
+    if (this.observer) {
+      this.observer();
+    }
+  }
+
   public handleClose = (isOpen: boolean) => {
     this.setState({ isOpen });
   };
@@ -47,11 +63,21 @@ class ClusterBase extends React.Component<ClusterProps, ClusterState> {
     return false;
   };
 
+  private handleResize = () => {
+    const { width } = this.state;
+    const { clientWidth = 0 } = this.containerRef?.current || {};
+
+    if (clientWidth !== width) {
+      this.setState({ width: clientWidth });
+    }
+  };
+
   public render() {
     const { clusters, groupBy, intl, report, title } = this.props;
-    const { isOpen, showAll } = this.state;
+    const { isOpen, showAll, width } = this.state;
 
-    const maxCharsPerName = 45; // Max (non-whitespace) characters that fit without overlapping card
+    // Cluster name may be up to 256 chars, while the ID is 50
+    let maxCharsPerName = 55; // Max (non-whitespace) characters that fit without overlapping card
     const maxItems = 2; // Max items to show before adding "more" link
     const someClusters = [];
 
@@ -95,6 +121,9 @@ class ClusterBase extends React.Component<ClusterProps, ClusterState> {
         someClusters.push(clusterString);
       } else if (someClusters.length < maxItems) {
         if (clusterString.length > maxCharsPerName) {
+          if (width < 475) {
+            maxCharsPerName = 40;
+          }
           clusterString = clusterString.slice(0, maxCharsPerName).trim().concat('...');
           someClusters.push(
             <Tooltip content={cluster} enableFlip>
@@ -108,7 +137,7 @@ class ClusterBase extends React.Component<ClusterProps, ClusterState> {
     }
 
     return (
-      <div style={styles.clustersContainer}>
+      <div ref={this.containerRef} style={styles.clustersContainer}>
         {someClusters && someClusters.map((cluster, index) => <span key={index}>{cluster}</span>)}
         {someClusters.length < allClusters.length && (
           <a data-testid="cluster-lnk" href="#/" onClick={this.handleOpen}>

src/routes/details/components/pvcChart/pvcChart.tsx

@@ -10,6 +10,7 @@ import {
   TextListItem,
   TextListItemVariants,
   TextListVariants,
+  Tooltip,
 } from '@patternfly/react-core';
 import type { OcpQuery } from 'api/queries/ocpQuery';
 import { parseQuery } from 'api/queries/ocpQuery';
@@ -214,6 +215,31 @@ class PvcChartBase extends React.Component<PvcChartProps, PvcChartState> {
     );
   };
 
+  private getClusterName = item => {
+    const { width } = this.state;
+
+    // Cluster name may be up to 256 chars, while the ID is 50
+    let maxCharsPerName = 50;
+    const clusterName = item?.clusters ? item.clusters[0] : null;
+
+    // Max (non-whitespace) characters that fit without overlapping card
+    if (width < 475) {
+      maxCharsPerName = 25; // Provide more space for tooltip at smallest window size
+    } else if (width < 800) {
+      const k = 100 + (800 - width) / 8;
+      maxCharsPerName = (width / k) * 5;
+    }
+
+    if (clusterName?.length > maxCharsPerName) {
+      return (
+        <Tooltip content={clusterName} enableFlip>
+          <span>{clusterName.slice(0, maxCharsPerName).trim().concat('...')}</span>
+        </Tooltip>
+      );
+    }
+    return clusterName;
+  };
+
   private getDescription = item => {
     const { intl } = this.props;
 
@@ -226,7 +252,7 @@ class PvcChartBase extends React.Component<PvcChartProps, PvcChartState> {
             </TextListItem>
             <TextListItem component={TextListItemVariants.dd}>{item.persistent_volume_claim}</TextListItem>
             <TextListItem component={TextListItemVariants.dt}>{intl.formatMessage(messages.cluster)}</TextListItem>
-            <TextListItem component={TextListItemVariants.dd}>{item.clusters ? item.clusters[0] : null}</TextListItem>
+            <TextListItem component={TextListItemVariants.dd}>{this.getClusterName(item)}</TextListItem>
           </TextList>
         </TextContent>
         <TextContent className="textContentOverride">