improvement: treatments UI/UX updated again to minimize clicking and scrolling.

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

@@ -56,28 +56,31 @@ export function AppointmentsStrip({
 
   return (
     <Card className="space-y-4">
-      <div className="flex items-center justify-between gap-3 flex-wrap">
-        <div className="flex items-center gap-2 min-w-0">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:items-center">
+        <div className="flex min-w-0 items-center gap-2">
           <CalendarDays className="w-5 h-5 text-text-muted shrink-0 icon-flat" aria-hidden />
           <h2 className="text-sm font-semibold text-text-primary truncate">{t('appointmentsTitle')}</h2>
         </div>
-        <button
-          type="button"
-          onClick={onToggleStripHidden}
-          className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
-        >
-          {t('hideAppointments')}
-        </button>
-      </div>
-
-      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:justify-between">
-        <ScheduleDayPicker
-          value={selectedDay}
-          onChange={(d) => onSelectDay(startOfLocalDay(d))}
-        />
-        {loading && (
-          <p className="text-sm text-text-muted pb-2">{t('loadingAppointments')}</p>
-        )}
+        <div className="flex min-w-0 justify-center">
+          <ScheduleDayPicker
+            compact
+            className="max-w-sm"
+            value={selectedDay}
+            onChange={(d) => onSelectDay(startOfLocalDay(d))}
+          />
+        </div>
+        <div className="flex min-w-0 items-center justify-end gap-3">
+          {loading ? (
+            <p className="text-sm text-text-muted">{t('loadingAppointments')}</p>
+          ) : null}
+          <button
+            type="button"
+            onClick={onToggleStripHidden}
+            className="text-sm font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 rounded-[var(--radius-sm)]"
+          >
+            {t('hideAppointments')}
+          </button>
+        </div>
       </div>
 
       <div className="space-y-3">