improvement: attachment selection for lab dispatch added. attachment preview added to cases feature.

frontend/src/components/ui/shared/Badge.tsx

@@ -11,6 +11,15 @@ interface BadgeProps {
    * Set false only when the pill should shrink to the label.
    */
   fixedWidth?: boolean;
+  /**
+   * Inline style overriding the variant colors — e.g. dynamic prosthesis-type
+   * pastels via `prosthesisTypeBadgeStyle(code)`. Wins over variant classes.
+   */
+  style?: React.CSSProperties;
+  /** Native tooltip, useful when the label may be truncated. */
+  title?: string;
+  /** Clip an over-long label with an ellipsis instead of wrapping/overflowing. */
+  truncate?: boolean;
 }
 
 const variantStyles: Record<BadgeVariant, string> = {
@@ -29,16 +38,22 @@ export function Badge({
   variant = 'default',
   className,
   fixedWidth = true,
+  style,
+  title,
+  truncate = false,
 }: BadgeProps) {
   const layoutClass = fixedWidth
     ? `${FIXED_LAYOUT_CLASS} justify-center text-center`
     : 'min-h-[1.75rem] px-2.5 py-1 justify-center';
+  const wrapClass = truncate ? '' : 'whitespace-nowrap';
 
   return (
     <span
-      className={`inline-flex items-center box-border rounded-md border text-xs font-medium leading-none whitespace-nowrap ${variantStyles[variant]} ${layoutClass} ${className ?? ''}`}
+      className={`inline-flex items-center box-border rounded-md border text-xs font-medium leading-none ${wrapClass} ${variantStyles[variant]} ${layoutClass} ${className ?? ''}`}
+      style={style}
+      title={title}
     >
-      {children}
+      {truncate ? <span className="w-full truncate text-center">{children}</span> : children}
     </span>
   );
 }