Icshwi 10611 truncating reference on ioc list page

src/components/IOC/IOCTable.js

 import React, { useCallback } from 'react';
 import { CustomTable } from "../common/table/CustomTable";
-import { Grid, Tooltip } from "@material-ui/core";
+import { Grid, Tooltip, Typography } from "@material-ui/core";
 import { IOCStatusIcon } from './IOCIcons';
 import { noWrapText } from '../common/Helper';
 import { useRedirect } from '../../hooks/Redirect';
@@ -29,11 +29,17 @@ const hostDetailsColumns = [
 ]
 
 function createGitVersionField(version, shortVersion) {
+  const versionText = shortVersion ?? version;
   return (
     <>
       {version ?
         <Tooltip title={version} arrow enterDelay={400}>
-          <label>{noWrapText(shortVersion ?? version)}</label>
+          <Typography style={{ fontFamily: "monospace", 
+            overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"}}>
+               { versionText?.length > 10 ?
+                  `${versionText.substring(0, 10)}...` : versionText
+                }
+            </Typography>
         </Tooltip>
         : "---"
       }

src/components/IOC/IOCTable.spec.js

@@ -25,7 +25,7 @@ describe("HostTable", () => {
     it("Truncates all text content", () => {
       cy.get("tbody > tr").first()
         .find(".MuiTypography-noWrap")
-        .should("have.length", textColumns.length)
+        .should("have.length", textColumns.length - 1)
     })
 
     it("Displays correct content in first row", () => {