attempt css solution

client/src/components/util/truncate.js

@@ -118,34 +118,69 @@ export default class Truncate extends Component {
   };
 
   render() {
-    const { children, size, fontSize, bold, italic } = this.props;
+    const { children } = this.props;
     // Truncate only support a single child with a text child
-
     if (
       React.Children.count(children) === 1 &&
       React.Children.count(children.props?.children) === 1
     ) {
-      const originalString = children.props.children;
+      const originalStr = children.props.children;
-      const truncatedString = this.maybeTruncateString(
+      const firstHalf = originalStr.slice(0, originalStr.length / 2);
-        originalString,
+      const secondHalf = originalStr.slice(originalStr.length / 2);
-        size,
+
-        fontSize,
+      const startFixedChars = 5;
-        bold,
+      const endFixedChars = 5;
-        italic
+      const fontFaceScaleFactor = 0.16;
+      const startWidth = `1em * ${fontFaceScaleFactor} * ${startFixedChars} * 2`;
+      const endWidth = `1em * ${fontFaceScaleFactor} * ${endFixedChars} * 2`;
+
+      const commonStyling = {
+        display: "inline-block",
+        verticalAlign: "bottom",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+      };
+
+      const truncatedChildren = (
+        <>
+          <span
+            style={{
+              ...commonStyling,
+              maxWidth: `calc(100% - calc(${endWidth}))`,
+              minWidth: `calc(${startWidth})`,
+              textOverflow: "ellipsis",
+              backgroundColor: "rgba(255, 0, 0, 0.7)",
+            }}
+          >
+            {firstHalf}
+          </span>
+          <span
+            style={{
+              ...commonStyling,
+              maxWidth: `calc(100% - calc(${startWidth}))`,
+              direction: "rtl",
+              backgroundColor: "rgba(0, 0, 255, 0.7)",
+            }}
+          >
+            {secondHalf}
+          </span>
+        </>
       );
 
-      // Only make tooltip if string has to be truncated
-      if (truncatedString) {
-        // clone children, changing the children(text) to the truncated string
       const newChildren = React.Children.map(children, (child) =>
         cloneElement(child, {
-            children: truncatedString,
           "data-truncated": true,
+          children: truncatedChildren,
+          style: {
+            ...child.props.style,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+          },
         })
       );
       return (
         <Tooltip
-            content={originalString}
+          content={originalStr}
           hoverOpenDelay={tooltipHoverOpenDelayQuick}
           position={Position.LEFT}
           usePortal
@@ -158,8 +193,7 @@ export default class Truncate extends Component {
         </Tooltip>
       );
     }
-      return children;
+
-    }
     throw Error("Only pass a single child with inner text to Truncate");
   }
 }