improvement: icons added to prosthesis types catalog.

frontend/src/components/ui/treatment/TreatmentDetailsEditor.tsx

@@ -18,6 +18,9 @@ import {
   isLabDependentDetailMissingTeeth,
 } from '@/components/treatment/treatmentDetailRules';
 
+const WORKSPACE_ACTION_BTN_HEIGHT = 'h-[2.875rem] sm:h-9';
+const WORKSPACE_ACTION_BTN_CLASS = `${WORKSPACE_ACTION_BTN_HEIGHT} shrink-0 px-3 text-sm`;
+
 interface TreatmentDetailsEditorProps {
   details: TreatmentDetailDraft[];
   activeDetailId: string;
@@ -116,6 +119,8 @@ export function TreatmentDetailsEditor({
     );
   }
 
+  const actionWidthLabels = [t('showLabDispatch'), t('showChart'), t('addDetail')];
+
   return (
     <div className="surface-card p-3 sm:p-4 space-y-4">
       {showChrome ? (
@@ -127,6 +132,7 @@ export function TreatmentDetailsEditor({
             {voice ? (
               <AddDetailWithVoice
                 addLabel={t('addDetail')}
+                widthLabels={actionWidthLabels}
                 startLabel={t('voiceStart')}
                 stopLabel={t('voiceStop')}
                 disabled={!canEdit || disabled}
@@ -137,12 +143,12 @@ export function TreatmentDetailsEditor({
               <Button
                 type="button"
                 variant="primary"
+                size="sm"
                 disabled={!canEdit || disabled}
                 onClick={onAddDetail}
-                fullWidth
-                className="sm:w-auto shrink-0"
+                className={WORKSPACE_ACTION_BTN_CLASS}
               >
-                {t('addDetail')}
+                <WorkspaceActionLabel label={t('addDetail')} widthLabels={actionWidthLabels} />
               </Button>
             )}
           </div>
@@ -263,7 +269,8 @@ export function TreatmentDetailsEditor({
               <Button
                 type="button"
                 variant={labWorkspaceView === 'dispatch' ? 'outline' : 'primary'}
-                className={`h-[2.875rem] sm:h-9 shrink-0 px-3 text-sm ${
+                size="sm"
+                className={`${WORKSPACE_ACTION_BTN_CLASS} ${
                   labWorkspaceView === 'dispatch' ? 'bg-background-secondary' : ''
                 }`}
                 onClick={() =>
@@ -272,17 +279,10 @@ export function TreatmentDetailsEditor({
                   )
                 }
               >
-                <span className="inline-grid justify-items-center">
-                  <span className="invisible col-start-1 row-start-1 whitespace-nowrap" aria-hidden>
-                    {t('showLabDispatch')}
-                  </span>
-                  <span className="invisible col-start-1 row-start-1 whitespace-nowrap" aria-hidden>
-                    {t('showChart')}
-                  </span>
-                  <span className="col-start-1 row-start-1 whitespace-nowrap">
-                    {labWorkspaceView === 'dispatch' ? t('showChart') : t('showLabDispatch')}
-                  </span>
-                </span>
+                <WorkspaceActionLabel
+                  label={labWorkspaceView === 'dispatch' ? t('showChart') : t('showLabDispatch')}
+                  widthLabels={actionWidthLabels}
+                />
               </Button>
             ) : null}
           </div>
@@ -327,6 +327,29 @@ export function TreatmentDetailsEditor({
   );
 }
 
+function WorkspaceActionLabel({
+  label,
+  widthLabels,
+}: {
+  label: string;
+  widthLabels: string[];
+}) {
+  return (
+    <span className="inline-grid justify-items-center">
+      {widthLabels.map((text, index) => (
+        <span
+          key={`${index}-${text}`}
+          className="invisible col-start-1 row-start-1 whitespace-nowrap"
+          aria-hidden
+        >
+          {text}
+        </span>
+      ))}
+      <span className="col-start-1 row-start-1 whitespace-nowrap">{label}</span>
+    </span>
+  );
+}
+
 function NotesField({
   textareaRef,
   value,
@@ -377,6 +400,7 @@ function NotesField({
  */
 function AddDetailWithVoice({
   addLabel,
+  widthLabels,
   startLabel,
   stopLabel,
   disabled,
@@ -384,6 +408,7 @@ function AddDetailWithVoice({
   voice,
 }: {
   addLabel: string;
+  widthLabels: string[];
   startLabel: string;
   stopLabel: string;
   disabled: boolean;
@@ -397,8 +422,8 @@ function AddDetailWithVoice({
   return (
     <div
       className={`
-        inline-flex w-full items-stretch overflow-hidden rounded-[var(--radius-md)]
-        bg-primary text-white shrink-0 sm:w-auto
+        inline-flex items-stretch overflow-hidden rounded-[var(--radius-md)]
+        bg-primary text-white shrink-0 ${WORKSPACE_ACTION_BTN_HEIGHT}
         ${disabled ? 'opacity-60' : ''}
       `}
     >
@@ -407,13 +432,13 @@ function AddDetailWithVoice({
         onClick={onAddDetail}
         disabled={disabled || isBusy}
         className="
-          flex-1 px-4 py-2 text-sm font-medium transition-all duration-200
+          px-3 text-sm font-medium transition-all duration-200
           hover:opacity-90 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset
           focus-visible:ring-white/60
           disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:opacity-60
         "
       >
-        {addLabel}
+        <WorkspaceActionLabel label={addLabel} widthLabels={widthLabels} />
       </button>
       <button
         type="button"