app now responsive for mobile and small devices.

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

@@ -104,7 +104,7 @@ export function AppointmentsStrip({
               padding="none"
               style={treatmentTypeBannerStyle(a.purpose, purposeIndex < 0 ? 0 : purposeIndex)}
               className={`
-                text-left rounded-[var(--radius-sm)] px-3 py-2 min-w-[200px] max-w-[280px] transition-shadow min-h-[52px]
+                text-left rounded-[var(--radius-sm)] px-3 py-2 w-full sm:w-auto sm:min-w-[200px] sm:max-w-[280px] transition-shadow min-h-[52px]
                 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
                 ${sel ? 'ring-2 ring-primary ring-offset-2 ring-offset-background-secondary shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]' : 'hover:brightness-110'}
               `}

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

@@ -445,7 +445,7 @@ export function LabCasesDispatchPanel({
                                       e.target.value,
                                     )
                                   }
-                                  className={`${FORM_SELECT_CLASS} w-full min-w-[160px]`}
+                                  className={`${FORM_SELECT_CLASS} w-full min-w-0 sm:min-w-[160px]`}
                                 >
                                   <option value="">{t('prosthesisSelectPlaceholder')}</option>
                                   {prosthesisOptions.map((opt) => (

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

@@ -60,13 +60,20 @@ export function TreatmentDetailsEditor({
   const showPendingLabHint = isLabDependent && !locked && !readOnly;
 
   return (
-    <div className="surface-card p-4 space-y-4">
-      <div className="flex flex-wrap items-center justify-between gap-3">
+    <div className="surface-card p-3 sm:p-4 space-y-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
         <div>
           <h3 className="text-sm font-semibold text-text-primary">{t('detailsTitle')}</h3>
           <p className="text-xs text-text-muted mt-0.5">{t('detailsSubtitle')}</p>
         </div>
-        <Button type="button" variant="primary" disabled={!canEdit || disabled} onClick={onAddDetail}>
+        <Button
+          type="button"
+          variant="primary"
+          disabled={!canEdit || disabled}
+          onClick={onAddDetail}
+          fullWidth
+          className="sm:w-auto shrink-0"
+        >
           {t('addDetail')}
         </Button>
       </div>

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

@@ -1107,7 +1107,7 @@ export function TreatmentWorkspace({ userId, currentOrganization }: TreatmentWor
   return (
     <div className="space-y-4">
       <header className="space-y-1">
-        <h1 className="text-2xl font-semibold text-text-primary">{t('title')}</h1>
+        <h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
         <p className="text-sm text-text-secondary">
           {canEdit ? t('subtitleEditPhase4') : t('subtitleReadOnly')}
         </p>