improvement: Some improvements done. some bugs fixed.

frontend/src/components/ui/lab/CaseDetailPanel.tsx

@@ -18,10 +18,8 @@ import {
 import { labTaskStatusVariant } from '@/components/lab/labTaskStatusDisplay';
 import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
 import { LabCaseOriginBadge } from '@/components/ui/lab/LabCaseOriginBadge';
-import {
-  formatToothList,
-  prosthesisTypeBadgeStyleFromCatalog,
-} from '@/components/treatment/prosthesisTypeDisplay';
+import { formatToothList } from '@/components/treatment/prosthesisTypeDisplay';
+import { ProsthesisStackedTypeLabel } from '@/components/ui/lab/ProsthesisStackedTypeLabel';
 import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
 import {
   buildCaseConnectedTeeth,
@@ -313,23 +311,16 @@ export function CaseDetailPanel({
               className="rounded-md border border-border p-3 space-y-2"
             >
               <div className="flex flex-wrap items-center gap-2">
-                <Badge
-                  truncate
+                <ProsthesisStackedTypeLabel
+                  className="max-w-[16rem] text-sm font-medium"
+                  code={group.prosthesisTypeCode}
+                  catalog={prosthesisCatalog}
                   title={group.prosthesisTypeLabel}
-                  style={prosthesisTypeBadgeStyleFromCatalog(
-                    group.prosthesisTypeCode,
-                    prosthesisCatalog,
-                  )}
-                >
-                  {group.prosthesisTypeLabel}
-                </Badge>
-                <span className="text-sm font-medium text-text-primary">
-                  {t('toothGroupTitle', {
-                    teeth: formatToothList(group.teeth, {
-                      UA: tTreatment('selectedArchUpper'),
-                      LA: tTreatment('selectedArchLower'),
-                    }),
-                    prosthesis: group.prosthesisTypeLabel,
+                />
+                <span className="text-sm text-text-secondary">
+                  {formatToothList(group.teeth, {
+                    UA: tTreatment('selectedArchUpper'),
+                    LA: tTreatment('selectedArchLower'),
                   })}
                 </span>
                 {group.connected ? <ConnectedSelectionBadge /> : null}