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}