From c8805171693ec4070b9f9bc9b194b4ee91d971fa Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Tue, 2 Jun 2026 16:38:56 +0300
Subject: [PATCH] =?UTF-8?q?fix(datepicker):=20=D1=83=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D1=82=D1=8C=20=D1=81=D0=BA=D0=B0=D1=87=D0=BA=D0=B8=20=D0=B8=20?=
 =?UTF-8?q?=D0=BF=D0=BE=D0=BF=D1=80=D0=B0=D0=B2=D0=B8=D1=82=D1=8C=20=D0=B0?=
 =?UTF-8?q?=D0=B4=D0=B0=D0=BF=D1=82=D0=B8=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Числовой формат даты (01.06.2026) — постоянная ширина в любой локали,
  раньше короткое имя месяца («мая» vs «сент.») меняло ширину кнопки.
- min-w + justify-start + truncate на триггере: плейсхолдер и выбранная
  дата дают одинаковую ширину — поле не прыгает по горизонтали.
- fixedWeeks + showOutsideDays: всегда 6 недель, высота календаря не
  скачет при листании месяцев (5↔6 рядов).
- collisionPadding + max-w-[calc(100vw-1rem)]: поповер не вылезает за край
  экрана на мобайле.
- Контейнеры диапазона дат (продажи, трафик) переведены на flex-wrap /
  full-width на мобайле — два поля больше не вылезают за ширину.
---
 src/components/DateField.tsx                      | 15 +++++++++++----
 .../admin/trafficUsage/filters/PeriodSelector.tsx |  4 ++--
 src/components/sales-stats/PeriodSelector.tsx     |  2 +-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/DateField.tsx b/src/components/DateField.tsx
index d634c2d..585560f 100644
--- a/src/components/DateField.tsx
+++ b/src/components/DateField.tsx
@@ -51,10 +51,12 @@ export function DateField({ value, onChange, placeholder, min, max, className }:
 
   const selected = parseISO(value);
   const locale = LOCALES[i18n.language as keyof typeof LOCALES] ?? enUS;
+  // Numeric format keeps a constant button width across dates and locales
+  // (a "short" month name varies in length and makes the trigger jitter).
   const display = selected
     ? selected.toLocaleDateString(i18n.language, {
         day: '2-digit',
-        month: 'short',
+        month: '2-digit',
         year: 'numeric',
       })
     : '';
@@ -72,18 +74,21 @@ export function DateField({ value, onChange, placeholder, min, max, className }:
           type="button"
           className={
             className ??
-            'flex items-center gap-2 rounded-lg border border-dark-600 bg-dark-800 px-3 py-1.5 text-sm text-dark-200 transition-colors hover:border-dark-500'
+            'flex min-w-[8rem] items-center justify-start gap-2 whitespace-nowrap rounded-lg border border-dark-600 bg-dark-800 px-3 py-1.5 text-sm text-dark-200 transition-colors hover:border-dark-500'
           }
         >
           <CalendarIcon className="h-4 w-4 shrink-0 text-dark-500" />
-          <span className={selected ? '' : 'text-dark-500'}>{display || placeholder}</span>
+          <span className={`truncate ${selected ? '' : 'text-dark-500'}`}>
+            {display || placeholder}
+          </span>
         </button>
       </Popover.Trigger>
       <Popover.Portal>
         <Popover.Content
           align="start"
           sideOffset={6}
-          className="rdp-dark z-50 rounded-xl border border-dark-700 bg-dark-800 p-2 shadow-xl"
+          collisionPadding={8}
+          className="rdp-dark z-50 max-w-[calc(100vw-1rem)] rounded-xl border border-dark-700 bg-dark-800 p-2 shadow-xl"
         >
           <DayPicker
             mode="single"
@@ -91,6 +96,8 @@ export function DateField({ value, onChange, placeholder, min, max, className }:
             selected={selected}
             defaultMonth={selected}
             disabled={disabled}
+            fixedWeeks
+            showOutsideDays
             components={{ Chevron: NavChevron }}
             onSelect={(d) => {
               if (d) {
diff --git a/src/components/admin/trafficUsage/filters/PeriodSelector.tsx b/src/components/admin/trafficUsage/filters/PeriodSelector.tsx
index 9d020fe..52d5973 100644
--- a/src/components/admin/trafficUsage/filters/PeriodSelector.tsx
+++ b/src/components/admin/trafficUsage/filters/PeriodSelector.tsx
@@ -42,8 +42,8 @@ export function PeriodSelector({
 
   if (dateMode) {
     return (
-      <div className="flex items-center gap-2">
-        <CalendarIcon className="h-4 w-4" />
+      <div className="flex flex-wrap items-center gap-2">
+        <CalendarIcon className="h-4 w-4 shrink-0" />
         <span className="text-xs text-dark-400">{t('admin.trafficUsage.dateFrom')}</span>
         <DateField
           value={customStart}
diff --git a/src/components/sales-stats/PeriodSelector.tsx b/src/components/sales-stats/PeriodSelector.tsx
index 19c465b..c6d0208 100644
--- a/src/components/sales-stats/PeriodSelector.tsx
+++ b/src/components/sales-stats/PeriodSelector.tsx
@@ -68,7 +68,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) {
       </button>
 
       {showCustom && (
-        <div className="flex items-center gap-2">
+        <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto">
           <DateField
             value={value.startDate || ''}
             onChange={(v) => handleDateChange('startDate', v)}