Fix few issues

frontend/src/components/ui/ResponsiveText/ResponsiveText.tsx

@@ -0,0 +1,89 @@
+/**
+ * ResponsiveText Component
+ * Automatically adjusts text size and truncation based on screen size
+ */
+
+import React from 'react';
+import { TextOverflowPrevention, getScreenSize, overflowClasses } from '../../../utils/textUtils';
+
+export interface ResponsiveTextProps {
+  text: string;
+  maxLength?: {
+    mobile?: number;
+    tablet?: number;
+    desktop?: number;
+  };
+  className?: string;
+  title?: string;
+  truncationType?: 'statusCard' | 'production' | 'mobile';
+  textType?: 'title' | 'subtitle' | 'label' | 'metadata' | 'action';
+  showTooltip?: boolean;
+  as?: keyof JSX.IntrinsicElements;
+}
+
+export const ResponsiveText: React.FC<ResponsiveTextProps> = ({
+  text,
+  maxLength,
+  className = '',
+  title,
+  truncationType = 'statusCard',
+  textType = 'title',
+  showTooltip = true,
+  as: Component = 'span'
+}) => {
+  const screenSize = React.useMemo(() => getScreenSize(), []);
+
+  // Get truncation engine based on type
+  const getTruncationEngine = () => {
+    switch (truncationType) {
+      case 'mobile':
+        return TextOverflowPrevention.mobile;
+      case 'production':
+        return TextOverflowPrevention.production;
+      default:
+        return TextOverflowPrevention.statusCard;
+    }
+  };
+
+  const engine = getTruncationEngine();
+
+  // Get truncated text based on text type
+  const getTruncatedText = () => {
+    if (maxLength) {
+      const currentMaxLength = maxLength[screenSize] || maxLength.desktop || text.length;
+      return text.length > currentMaxLength
+        ? text.substring(0, currentMaxLength - 3) + '...'
+        : text;
+    }
+
+    // Use predefined truncation methods
+    switch (textType) {
+      case 'title':
+        return engine.title ? engine.title(text) : text;
+      case 'subtitle':
+        return engine.subtitle ? engine.subtitle(text) : text;
+      case 'label':
+        return engine.primaryValueLabel ? engine.primaryValueLabel(text) : text;
+      case 'metadata':
+        return engine.metadataItem ? engine.metadataItem(text) : text;
+      case 'action':
+        return engine.actionLabel ? engine.actionLabel(text) : text;
+      default:
+        return text;
+    }
+  };
+
+  const truncatedText = getTruncatedText();
+  const shouldShowTooltip = showTooltip && truncatedText !== text;
+
+  return (
+    <Component
+      className={`${overflowClasses.truncate} ${className}`}
+      title={shouldShowTooltip ? (title || text) : title}
+    >
+      {truncatedText}
+    </Component>
+  );
+};
+
+export default ResponsiveText;

frontend/src/components/ui/ResponsiveText/index.ts

@@ -0,0 +1,2 @@
+export { ResponsiveText } from './ResponsiveText';
+export type { ResponsiveTextProps } from './ResponsiveText';