message: Ellipsis on cards of overview page when namespace name is too large
  Adding some styles to truncate the namespace name if it is too large to fit the card in one line
  Add a tooltip to be able to read the full name of the namespace
  Fixes kiali/kiali#2330.
diff: @@ -65,6 +65,15 @@ const emptyStateStyle = style({
  marginTop: 10
  });
  +const cardNamespaceNameStyle = style({
  + display: 'inline-block',
  + maxWidth: 'calc(100% - 45px)',
  + overflow: 'hidden',
  + textOverflow: 'ellipsis',
  + verticalAlign: 'middle',
  + whiteSpace: 'nowrap'
  +});
  +
  type State = {
  namespaces: NamespaceInfo[];
  type: OverviewType;
  @@ -381,7 +390,9 @@ export class OverviewPage extends React.Component<OverviewProps, State> {
  <Card isCompact={true} className={cardGridStyle}>
  <CardHeader>
  {ns.tlsStatus ? <NamespaceMTLSStatusContainer status={ns.tlsStatus.status} /> : undefined}
  + <span className={cardNamespaceNameStyle} title={ns.name}>
  {ns.name}
  + </span>
  {this.renderIstioConfigStatus(ns)}
  </CardHeader>
  <CardBody>
  