Fix name overflow on deployed model card (#3465)

* Fix name overflow on deployed model card

* Tooltip render fix

frontend/src/pages/projects/screens/detail/overview/serverModels/deployedModels/DeployedModelCard.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Button,
   CardBody,
   CardFooter,
   CardHeader,
@@ -11,8 +12,9 @@ import {
   TextListItem,
   TextListItemVariants,
   TextListVariants,
+  Truncate,
 } from '@patternfly/react-core';
-import { Link } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ProjectObjectType } from '~/concepts/design/utils';
 import { InferenceServiceKind, ServingRuntimeKind } from '~/k8sTypes';
 import InferenceServiceStatus from '~/pages/modelServing/screens/global/InferenceServiceStatus';
@@ -36,6 +38,7 @@ const DeployedModelCard: React.FC<DeployedModelCardProps> = ({
   servingRuntime,
 }) => {
   const [modelMetricsEnabled] = useModelMetricsEnabled();
+  const navigate = useNavigate();
   const kserveMetricsEnabled = useIsAreaAvailable(SupportedArea.K_SERVE_METRICS).status;
   const modelMesh = isModelMesh(inferenceService);
   const { currentProject } = React.useContext(ProjectDetailsContext);
@@ -61,11 +64,18 @@ const DeployedModelCard: React.FC<DeployedModelCardProps> = ({
             <FlexItem>
               <ResourceNameTooltip resource={inferenceService}>
                 {modelMetricsSupported ? (
-                  <Link
-                    to={`/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`}
+                  <Button
+                    variant="link"
+                    isInline
+                    onClick={() => {
+                      navigate(
+                        `/projects/${inferenceService.metadata.namespace}/metrics/model/${inferenceService.metadata.name}`,
+                      );
+                    }}
+                    style={{ fontSize: 'var(--pf-v5-global--FontSize--md)' }}
                   >
-                    {inferenceServiceDisplayName}
-                  </Link>
+                    <Truncate content={inferenceServiceDisplayName} />
+                  </Button>
                 ) : (
                   inferenceServiceDisplayName
                 )}