fix(ui): restore native date panel selects with wider compact layout.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/skills/treatment-workspace/SKILL.md

@@ -70,7 +70,8 @@ Thin route: `app/[locale]/(dashboard)/treatment/page.tsx` (supports `?appointmen
 
 - **Not shipped to lab** — show treatments that have at least one lab-dependent detail (prosthesis via `labDependentCodes`) with `!sentAt`.
 - **Date** — filter on `treatmentAt` matching that local calendar day.
-- When **not shipped** is on and workspace is live (not browsing), prepend a synthetic **current draft** row (`id: 'current-draft'`) if it has pending lab-dependent details.
+- When **not shipped** is on, filters **already-fetched** history only (excludes the active appointment row).
+- **Previous treatments rail** excludes the active appointment; live draft stays in **Current draft** preview only. Refresh history after lab send.
 
 Helpers: `frontend/src/components/treatment/treatmentHistoryFilters.ts`.
 

frontend/src/components/treatment/treatmentHistoryFilters.ts

@@ -25,17 +25,13 @@ export function treatmentMatchesHistoryDate(treatmentAt: string, date: string):
 
 export function filterTreatmentHistoryItems(
   history: PastTreatment[],
-  currentDraft: PastTreatment | null,
   labDependentCodes: Set<string>,
   filters: TreatmentHistoryFilters,
+  excludeAppointmentId?: string | null,
 ): PastTreatment[] {
-  const source = (() => {
-    if (!currentDraft) return history;
-    const withoutCurrentAppointment = currentDraft.appointmentId
-      ? history.filter((item) => item.appointmentId !== currentDraft.appointmentId)
-      : history;
-    return [currentDraft, ...withoutCurrentAppointment];
-  })();
+  const source = excludeAppointmentId
+    ? history.filter((item) => item.appointmentId !== excludeAppointmentId)
+    : history;
 
   return source.filter((treatment) => {
     if (!treatmentMatchesHistoryDate(treatment.treatmentAt, filters.date)) {

frontend/src/components/ui/shared/AppDateInput.tsx

@@ -156,7 +156,7 @@ export function AppDateInput({
         <div
           id={`${panelId}-parts`}
           role="dialog"
-          className="absolute left-0 right-0 top-full z-50 mt-1 rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-lg"
+          className="absolute start-0 top-full z-50 mt-1 min-w-[17.5rem] w-max max-w-[calc(100vw-1.5rem)] rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-lg"
         >
           <CalendarDayPartsPanel
             panelId={panelId}

frontend/src/components/ui/shared/CalendarDayPartsPanel.tsx

@@ -27,6 +27,8 @@ const MONTH_KEYS = [
   'monthDecember',
 ] as const;
 
+const COMPACT_SELECT_CLASS = 'text-xs ps-2 pe-8 py-1';
+
 function daysInMonth(year: number, month: number): number {
   return new Date(year, month + 1, 0).getDate();
 }
@@ -102,14 +104,15 @@ export function CalendarDayPartsPanel({
   }
 
   return (
-    <div className="grid grid-cols-3 gap-2">
-      <div>
+    <div className="grid min-w-[17rem] grid-cols-[minmax(4.25rem,1fr)_minmax(6.75rem,1.35fr)_minmax(3.25rem,0.85fr)] gap-1.5">
+      <div className="min-w-0">
         <label htmlFor={`${panelId}-year`} className="mb-1 block text-xs font-medium text-text-muted">
           {t('year')}
         </label>
         <CompactSelect
           id={`${panelId}-year`}
           value={selectedYear}
+          className={COMPACT_SELECT_CLASS}
           onChange={(e) => applyParts(Number(e.target.value), selectedMonth, selectedDay)}
         >
           {years.map((year) => (
@@ -120,13 +123,14 @@ export function CalendarDayPartsPanel({
         </CompactSelect>
       </div>
 
-      <div>
+      <div className="min-w-0">
         <label htmlFor={`${panelId}-month`} className="mb-1 block text-xs font-medium text-text-muted">
           {t('month')}
         </label>
         <CompactSelect
           id={`${panelId}-month`}
           value={selectedMonth}
+          className={COMPACT_SELECT_CLASS}
           onChange={(e) => applyParts(selectedYear, Number(e.target.value), selectedDay)}
         >
           {persian
@@ -143,13 +147,14 @@ export function CalendarDayPartsPanel({
         </CompactSelect>
       </div>
 
-      <div>
+      <div className="min-w-0">
         <label htmlFor={`${panelId}-day`} className="mb-1 block text-xs font-medium text-text-muted">
           {t('day')}
         </label>
         <CompactSelect
           id={`${panelId}-day`}
           value={selectedDay}
+          className={COMPACT_SELECT_CLASS}
           onChange={(e) =>
             applyParts(selectedYear, selectedMonth, Number(e.target.value), closePanelOnDaySelect)
           }

frontend/src/components/ui/shared/CompactSelect.tsx

@@ -6,7 +6,7 @@ type CompactSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;
 export function CompactSelect({ className = '', children, ...props }: CompactSelectProps) {
   return (
     <select
-      className={`form-select w-full appearance-none rounded-[var(--radius-sm)] border border-border bg-background-card/90 text-text-primary text-sm ps-3 pe-10 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
+      className={`form-select w-full min-w-0 appearance-none rounded-[var(--radius-sm)] border border-border bg-background-card/90 text-text-primary text-sm ps-3 pe-10 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
       {...props}
     >
       {children}

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

@@ -15,7 +15,6 @@ import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
-  currentDraft?: PastTreatment | null;
   patientName?: string;
   currentAppointmentId?: string | null;
   treatmentCatalog: TreatmentCatalogEntry[];
@@ -33,7 +32,6 @@ function formatHistoryTimestamp(iso: string, locale: string): string {
 
 export function PastTreatmentsPanel({
   items,
-  currentDraft = null,
   patientName,
   currentAppointmentId,
   treatmentCatalog,
@@ -54,11 +52,11 @@ export function PastTreatmentsPanel({
 
   const displayedItems = useMemo(
     () =>
-      filterTreatmentHistoryItems(items, currentDraft, labDependentCodes, {
+      filterTreatmentHistoryItems(items, labDependentCodes, {
         notShippedOnly,
         date: filterDate,
-      }),
-    [items, currentDraft, labDependentCodes, notShippedOnly, filterDate],
+      }, currentAppointmentId),
+    [items, currentAppointmentId, labDependentCodes, notShippedOnly, filterDate],
   );
 
   function clearFilters() {
@@ -119,9 +117,6 @@ export function PastTreatmentsPanel({
       >
         {displayedItems.map((treatment) => {
           const isSelected = selectedPreviewId === treatment.id;
-          const isCurrentAppointment =
-            Boolean(currentAppointmentId) && treatment.appointmentId === currentAppointmentId;
-          const isLiveDraft = treatment.id === 'current-draft';
 
           return (
             <article
@@ -152,15 +147,6 @@ export function PastTreatmentsPanel({
                 >
                   {formatHistoryTimestamp(treatment.treatmentAt, locale)}
                 </time>
-                {isLiveDraft ? (
-                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
-                    {t('labAttentionCurrentDraft')}
-                  </span>
-                ) : isCurrentAppointment ? (
-                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
-                    {t('historyCurrentAppointment')}
-                  </span>
-                ) : null}
               </div>
 
               {treatment.details.length === 0 ? (

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

@@ -501,12 +501,19 @@ export function TreatmentWorkspace({
 
   const previewTreatment = useMemo(() => {
     if (!selectedPreviewId) return currentDraftPreview;
-    return (
+    const fromHistory =
       history.find((item) => item.id === selectedPreviewId) ??
-      historyPanelItems.find((item) => item.id === selectedPreviewId) ??
-      currentDraftPreview
-    );
-  }, [selectedPreviewId, history, historyPanelItems, currentDraftPreview]);
+      historyPanelItems.find((item) => item.id === selectedPreviewId);
+    if (
+      workspaceMode === 'live' &&
+      currentDraftPreview?.appointmentId &&
+      (selectedPreviewId === currentDraftPreview.id ||
+        fromHistory?.appointmentId === currentDraftPreview.appointmentId)
+    ) {
+      return currentDraftPreview;
+    }
+    return fromHistory ?? currentDraftPreview;
+  }, [selectedPreviewId, history, historyPanelItems, currentDraftPreview, workspaceMode]);
 
   const isBrowsing = selectedPreviewId !== null;
 
@@ -1039,23 +1046,33 @@ export function TreatmentWorkspace({
       const ok = workspaceModeRef.current === 'live' ? await flushDraftSave() : true;
       if (!ok) return false;
 
-      const isHistorical = isTreatmentDayHistorical(treatment.treatmentAt, todayStart);
+      let treatmentToLoad = treatment;
+      try {
+        const draftResponse = await treatmentsApi.getDraft(treatment.appointmentId);
+        if (draftResponse.data) {
+          treatmentToLoad = draftResponse.data;
+        }
+      } catch {
+        // Fall back to the history snapshot when draft cannot be loaded.
+      }
+
+      const isHistorical = isTreatmentDayHistorical(treatmentToLoad.treatmentAt, todayStart);
       setWorkspaceMode(isHistorical ? 'historical' : 'live');
       setSelectedPreviewId(null);
-      const nextDay = startOfLocalDay(new Date(treatment.treatmentAt));
+      const nextDay = startOfLocalDay(new Date(treatmentToLoad.treatmentAt));
       setSelectedDay((prev) => (compareLocalDayStart(prev, nextDay) === 0 ? prev : nextDay));
       setSelectionLocked(true);
-      setSelectedAppointmentId(treatment.appointmentId);
+      setSelectedAppointmentId(treatmentToLoad.appointmentId ?? treatment.appointmentId);
 
       skipNextGetDraftRef.current = true;
       draftHydratingRef.current = true;
-      hydrateFromTreatment(treatment);
+      hydrateFromTreatment(treatmentToLoad);
       draftHydratingRef.current = false;
 
       if (focusDetailClientId) {
         setActiveDetailId(focusDetailClientId);
         const mappedLabCases = withoutEmptyLabCaseDrafts(
-          (treatment.labCases ?? []).map(mapLabCaseDraftFromApi),
+          (treatmentToLoad.labCases ?? []).map(mapLabCaseDraftFromApi),
         );
         const linked = mappedLabCases.find(
           (lc) => !lc.sentAt && lc.detailClientId === focusDetailClientId,
@@ -1510,6 +1527,7 @@ export function TreatmentWorkspace({
         notifyTabBadgesChanged();
         if (selectedAppointment.patientId) {
           void refreshPatientLabCases(selectedAppointment.patientId);
+          void refreshHistory(selectedAppointment.patientId);
         }
       } catch (error: unknown) {
         showError(getUserFacingError(error, tErrors, t('errorSendCase')));
@@ -1523,6 +1541,7 @@ export function TreatmentWorkspace({
       persistDraft,
       persistLabCases,
       refreshPatientLabCases,
+      refreshHistory,
       showSuccess,
       showError,
       t,
@@ -1675,7 +1694,6 @@ export function TreatmentWorkspace({
             >
               <PastTreatmentsPanel
                 items={historyPanelItems}
-                currentDraft={null}
                 currentAppointmentId={selectedAppointmentId}
                 treatmentCatalog={treatmentCatalog}
                 labDependentCodes={labDependentCodes}