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