refactor(components): enhance component structure and add forwardRef support

- Refactored CustomAvatar, CustomColordLabel, CustomNumberLabel, and ProjectStatusIcon components to utilize React.forwardRef for improved ref handling.
- Introduced TooltipWrapper component to avoid findDOMNode warnings in React StrictMode, ensuring better compatibility with Ant Design's Tooltip.
- Updated TaskRow component to enhance layout and tooltip functionality for task display names, improving user experience and accessibility.

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -9,28 +9,28 @@ interface CustomNumberLabelProps {
   color?: string; // Add color prop for label color
 }
 
-const CustomNumberLabel: React.FC<CustomNumberLabelProps> = ({
-  labelList,
-  namesString,
-  isDarkMode = false,
-  color,
-}) => {
-  // Use provided color, or fall back to NumbersColorMap based on first digit
-  const backgroundColor = color || (() => {
-    const firstDigit = namesString.match(/\d/)?.[0] || '0';
-    return NumbersColorMap[firstDigit] || NumbersColorMap['0'];
-  })();
-  
-  return (
-    <Tooltip title={labelList.join(', ')}>
-      <span
-        className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white cursor-help"
-        style={{ backgroundColor }}
-      >
-        {namesString}
-      </span>
-    </Tooltip>
-  );
-};
+const CustomNumberLabel = React.forwardRef<HTMLSpanElement, CustomNumberLabelProps>(
+  ({ labelList, namesString, isDarkMode = false, color }, ref) => {
+    // Use provided color, or fall back to NumbersColorMap based on first digit
+    const backgroundColor = color || (() => {
+      const firstDigit = namesString.match(/\d/)?.[0] || '0';
+      return NumbersColorMap[firstDigit] || NumbersColorMap['0'];
+    })();
+    
+    return (
+      <Tooltip title={labelList.join(', ')}>
+        <span
+          ref={ref}
+          className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white cursor-help"
+          style={{ backgroundColor }}
+        >
+          {namesString}
+        </span>
+      </Tooltip>
+    );
+  }
+);
+
+CustomNumberLabel.displayName = 'CustomNumberLabel';
 
 export default CustomNumberLabel;