Tooltip and width of the table

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -65,7 +65,7 @@
     "typeHeader": "Type",
     "messageHeader": "Message",
     "reasonHeader": "Reason",
-    "transitionHeader": "Last transition time",
+    "transitionHeader": "Last change",
     "createSupportTicketButton": "Create Support Ticket",
     "supportTicketTitleReady": "MCP Ready",
     "supportTicketTitleNotReady": "MCP Not Ready",

src/components/ControlPlane/MCPHealthPopoverButton.tsx

@@ -18,6 +18,7 @@ import ReactTimeAgo from 'react-time-ago';
 import { AnimatedHoverTextButton } from '../Helper/AnimatedHoverTextButton.tsx';
 import { useTranslation } from 'react-i18next';
 import { useLink } from '../../lib/shared/useLink.ts';
+import TooltipCell from '../Shared/TooltipCell.tsx';
 export default function MCPHealthPopoverButton({
   mcpStatus,
   projectName,
@@ -104,21 +105,45 @@ export default function MCPHealthPopoverButton({
     {
       Header: t('MCPHealthPopoverButton.typeHeader'),
       accessor: 'type',
+      width: 150,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Cell: (instance: any) => {
+        return <TooltipCell>{instance.cell.value}</TooltipCell>;
+      },
     },
     {
       Header: t('MCPHealthPopoverButton.messageHeader'),
       accessor: 'message',
+      width: 350,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Cell: (instance: any) => {
+        return <TooltipCell>{instance.cell.value}</TooltipCell>;
+      },
     },
     {
       Header: t('MCPHealthPopoverButton.reasonHeader'),
       accessor: 'reason',
+      width: 100,
+      headerTooltip: 'sgs',
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      Cell: (instance: any) => {
+        return <TooltipCell>{instance.cell.value}</TooltipCell>;
+      },
     },
     {
       Header: t('MCPHealthPopoverButton.transitionHeader'),
       accessor: 'lastTransitionTime',
+      width: 110,
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       Cell: (instance: any) => {
-        return <ReactTimeAgo date={new Date(instance.cell.value)} />;
+        const rawDate = instance.cell.value;
+        const date = new Date(rawDate);
+
+        return (
+          <TooltipCell>
+            <ReactTimeAgo date={date} />
+          </TooltipCell>
+        );
       },
     },
   ];
@@ -155,9 +180,9 @@ function StatusTable({
   const { t } = useTranslation();
 
   return (
-    <div style={{ width: 600 }}>
+    <div style={{ width: 760 }}>
       <AnalyticalTable
-        scaleWidthMode="Smart"
+        scaleWidthMode="Default"
         columns={tableColumns}
         data={
           status?.conditions?.sort((a, b) => {

src/components/Shared/TooltipCell.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface TooltipCellProps {
+  children: React.ReactNode;
+  title?: string;
+}
+
+const TooltipCell: React.FC<TooltipCellProps> = ({ children, title }) => {
+  const resolvedTitle =
+    typeof children === 'string' || typeof children === 'number'
+      ? String(children)
+      : title;
+
+  return (
+    <div
+      title={resolvedTitle}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '100%',
+        width: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      <span
+        style={{
+          whiteSpace: 'nowrap',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          width: '100%',
+        }}
+      >
+        {children}
+      </span>
+    </div>
+  );
+};
+
+export default TooltipCell;