app now responsive for mobile and small devices.

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>