From c74200f6e1047c146db4f0a8711dd90784f65cb7 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Thu, 16 Apr 2026 17:22:30 +0300
Subject: [PATCH] fix: align mini calendar select with form controls

---
 frontend/src/components/calendar/CalendarCard.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarCard.tsx b/frontend/src/components/calendar/CalendarCard.tsx
index a55ae596..48a3a524 100644
--- a/frontend/src/components/calendar/CalendarCard.tsx
+++ b/frontend/src/components/calendar/CalendarCard.tsx
@@ -504,14 +504,14 @@ export const CalendarCard = memo(function CalendarCard({
               </div>
             )}
 
-            <div className="flex items-center gap-2">
+            <div className="relative">
               <select
                 value={selectedCalendarId === null ? "" : selectedCalendarId}
                 onChange={(e) => {
                   const value = e.target.value;
                   setSelectedCalendarId(value === "" ? null : Number(value));
                 }}
-                className="app-select flex-1 rounded-lg px-2.5 py-2 text-xs"
+                className="app-select w-full appearance-none rounded-xl py-2.5 pl-3 pr-10 text-sm"
               >
                 <option value="">📅 Все события</option>
                 {calendarOptions.map((cal) => (
@@ -520,6 +520,10 @@ export const CalendarCard = memo(function CalendarCard({
                   </option>
                 ))}
               </select>
+              <ChevronDown
+                size={16}
+                className="app-text-muted pointer-events-none absolute right-3 top-1/2 -translate-y-1/2"
+              />
             </div>
           </div>
         )}