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/CustomAvatar.tsx

@@ -1,25 +1,37 @@
+import React from 'react';
 import Tooltip from 'antd/es/tooltip';
 import Avatar from 'antd/es/avatar';
 
 import { AvatarNamesMap } from '../shared/constants';
 
-const CustomAvatar = ({ avatarName, size = 32 }: { avatarName: string; size?: number }) => {
-  const avatarCharacter = avatarName[0].toUpperCase();
+interface CustomAvatarProps {
+  avatarName: string;
+  size?: number;
+}
 
-  return (
-    <Tooltip title={avatarName}>
-      <Avatar
-        style={{
-          backgroundColor: AvatarNamesMap[avatarCharacter],
-          verticalAlign: 'middle',
-          width: size,
-          height: size,
-        }}
-      >
-        {avatarCharacter}
-      </Avatar>
-    </Tooltip>
-  );
-};
+const CustomAvatar = React.forwardRef<HTMLDivElement, CustomAvatarProps>(
+  ({ avatarName, size = 32 }, ref) => {
+    const avatarCharacter = avatarName[0].toUpperCase();
+
+    return (
+      <Tooltip title={avatarName}>
+        <div ref={ref} style={{ display: 'inline-block' }}>
+          <Avatar
+            style={{
+              backgroundColor: AvatarNamesMap[avatarCharacter],
+              verticalAlign: 'middle',
+              width: size,
+              height: size,
+            }}
+          >
+            {avatarCharacter}
+          </Avatar>
+        </div>
+      </Tooltip>
+    );
+  }
+);
+
+CustomAvatar.displayName = 'CustomAvatar';
 
 export default CustomAvatar;