From cfd6dec9d0f57031b611af7deaeccb67b4fcb20c Mon Sep 17 00:00:00 2001
From: Tero Halla-aho <thallaa@gmail.com>
Date: Sun, 21 Dec 2025 22:36:27 +0200
Subject: [PATCH] Embed month/year selects inside calendar header

---
 app/components/AvailabilityCalendar.tsx | 33 +++++++++++++------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/app/components/AvailabilityCalendar.tsx b/app/components/AvailabilityCalendar.tsx
index 5789805..5bdc524 100644
--- a/app/components/AvailabilityCalendar.tsx
+++ b/app/components/AvailabilityCalendar.tsx
@@ -109,24 +109,10 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
           <span style={{ fontWeight: 700 }}>{t('availabilityTitle')}</span>
           <span className="badge secondary">{t('availabilityLegendBooked')}</span>
         </div>
-        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4, flexWrap: 'wrap' }}>
           <button type="button" className="button secondary" onClick={() => shiftMonth(-1)} disabled={!hasCalendar || loading} style={{ padding: '6px 10px' }}>
             ←
           </button>
-          <select value={month} onChange={(e) => setMonth(Number(e.target.value))} disabled={!hasCalendar || loading}>
-            {monthOptions.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-          <select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading}>
-            {yearOptions.map((y) => (
-              <option key={y} value={y}>
-                {y}
-              </option>
-            ))}
-          </select>
           <button type="button" className="button secondary" onClick={() => shiftMonth(1)} disabled={!hasCalendar || loading} style={{ padding: '6px 10px' }}>
             →
           </button>
@@ -135,7 +121,22 @@ export default function AvailabilityCalendar({ listingId, hasCalendar }: { listi
       {error ? <div style={{ color: '#f87171', fontSize: 13 }}>{error}</div> : null}
       {monthViews.map((monthView) => (
         <div key={monthView.label} className="panel" style={{ padding: 12 }}>
-          <div style={{ fontWeight: 600, marginBottom: 8 }}>{monthView.label}</div>
+          <div style={{ display: 'flex', gap: 8, alignItems: 'center', marginBottom: 8 }}>
+            <select value={month} onChange={(e) => setMonth(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ flex: 1 }}>
+              {monthOptions.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </select>
+            <select value={year} onChange={(e) => setYear(Number(e.target.value))} disabled={!hasCalendar || loading} style={{ width: 120 }}>
+              {yearOptions.map((y) => (
+                <option key={y} value={y}>
+                  {y}
+                </option>
+              ))}
+            </select>
+          </div>
           <div
             style={{
               display: 'grid',