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

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

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)
           }