From 56f7a7517dfe468bd05e5b7e504c06678efeac20 Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 22:43:33 +0200
Subject: [PATCH] Localize month names and tighten calendar header

---
 app/components/AvailabilityCalendar.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/AvailabilityCalendar.tsx b/app/components/AvailabilityCalendar.tsx
index 5bdc524..856eecf 100644
--- a/app/components/AvailabilityCalendar.tsx
+++ b/app/components/AvailabilityCalendar.tsx
@@ -42,7 +42,7 @@ function buildMonths(monthCount: number, blocked: Set<string>, startYear: number
 type AvailabilityResponse = { blockedDates: string[] };
 
 export default function AvailabilityCalendar({ listingId, hasCalendar }: { listingId: string; hasCalendar: boolean }) {
-  const { t } = useI18n();
+  const { t, locale } = useI18n();
   const today = useMemo(() => new Date(), []);
   const [month, setMonth] = useState<number>(today.getUTCMonth());
   const [year, setYear] = useState<number>(today.getUTCFullYear());
@@ -93,9 +93,9 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
     () =>
       Array.from({ length: 12 }, (_, m) => ({
         value: m,
-        label: new Date(Date.UTC(2020, m, 1)).toLocaleString(undefined, { month: 'long' }),
+        label: new Date(Date.UTC(2020, m, 1)).toLocaleString(locale, { month: 'long' }),
       })),
-    [],
+    [locale],
   );
   const yearOptions = useMemo(() => {
     const current = today.getUTCFullYear();
@@ -107,9 +107,9 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
       <div style={{ display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
         <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
           <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
-          <span className="badge secondary">{t('availabilityLegendBooked')}</span>
         </div>
-        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
+        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+          <span className="badge secondary">{t('availabilityLegendBooked')}</span>
           <button type="button" className="button secondary" onClick={() => shiftMonth(-1)} disabled={!hasCalendar || loading} style={{ padding: '6px 10px' }}>
             ←
           </button>
@@ -129,7 +129,7 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
                 </option>
               ))}
             </select>
-            <select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 120 }}>
+            <select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 96 }}>
               {yearOptions.map((y) => (
                 <option key={y} value={y}>
                   {y}