attempt css solution

client/src/components/util/truncate.js

@@ -118,48 +118,82 @@ 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,
-        bold,
-        italic
-      );
 
-      // Only make tooltip if string has to be truncated
+      const startFixedChars = 5;
-      if (truncatedString) {
+      const endFixedChars = 5;
-        // clone children, changing the children(text) to the truncated string
+      const fontFaceScaleFactor = 0.16;
-        const newChildren = React.Children.map(children, (child) =>
+      const startWidth = `1em * ${fontFaceScaleFactor} * ${startFixedChars} * 2`;
-          cloneElement(child, {
+      const endWidth = `1em * ${fontFaceScaleFactor} * ${endFixedChars} * 2`;
-            children: truncatedString,
+
-            "data-truncated": true,
+      const commonStyling = {
-          })
+        display: "inline-block",
-        );
+        verticalAlign: "bottom",
-        return (
+        whiteSpace: "nowrap",
-          <Tooltip
+        overflow: "hidden",
-            content={originalString}
+      };
-            hoverOpenDelay={tooltipHoverOpenDelayQuick}
+
-            position={Position.LEFT}
+      const truncatedChildren = (
-            usePortal
+        <>
-            modifiers={{
+          <span
-              preventOverflow: { enabled: false },
+            style={{
-              hide: { enabled: false },
+              ...commonStyling,
+              maxWidth: `calc(100% - calc(${endWidth}))`,
+              minWidth: `calc(${startWidth})`,
+              textOverflow: "ellipsis",
+              backgroundColor: "rgba(255, 0, 0, 0.7)",
             }}
           >
-            {newChildren}
+            {firstHalf}
-          </Tooltip>
+          </span>
-        );
+          <span
-      }
+            style={{
-      return children;
+              ...commonStyling,
+              maxWidth: `calc(100% - calc(${startWidth}))`,
+              direction: "rtl",
+              backgroundColor: "rgba(0, 0, 255, 0.7)",
+            }}
+          >
+            {secondHalf}
+          </span>
+        </>
+      );
+
+      const newChildren = React.Children.map(children, (child) =>
+        cloneElement(child, {
+          "data-truncated": true,
+          children: truncatedChildren,
+          style: {
+            ...child.props.style,
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+          },
+        })
+      );
+      return (
+        <Tooltip
+          content={originalStr}
+          hoverOpenDelay={tooltipHoverOpenDelayQuick}
+          position={Position.LEFT}
+          usePortal
+          modifiers={{
+            preventOverflow: { enabled: false },
+            hide: { enabled: false },
+          }}
+        >
+          {newChildren}
+        </Tooltip>
+      );
     }
+
     throw Error("Only pass a single child with inner text to Truncate");
   }
 }