From 2486bf6e1991086654519f636f20e4c55c6cf003 Mon Sep 17 00:00:00 2001
From: inimaz <93inigo93@gmail.com>
Date: Tue, 9 Jun 2026 19:51:55 +0200
Subject: [PATCH] fix(UI): align date picker month arrows

---
 webapp/src/components/ui/calendar.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/webapp/src/components/ui/calendar.tsx b/webapp/src/components/ui/calendar.tsx
index 99ac94c4e..fc9b71b06 100644
--- a/webapp/src/components/ui/calendar.tsx
+++ b/webapp/src/components/ui/calendar.tsx
@@ -20,18 +20,19 @@ function Calendar({
             showOutsideDays={showOutsideDays}
             className={cn("p-3", className)}
             classNames={{
-                months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+                months: "relative flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
                 month: "space-y-4",
-                month_caption: "flex justify-center pt-1 relative items-center",
+                month_caption:
+                    "flex justify-center pt-1 px-10 relative items-center",
                 caption_label: "text-sm font-medium",
-                nav: "space-x-1 flex items-center",
+                nav: "pointer-events-none absolute inset-x-3 z-20 flex items-center justify-between",
                 button_previous: cn(
                     buttonVariants({ variant: "outline" }),
-                    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1",
+                    "pointer-events-auto h-8 w-8 bg-background p-0 opacity-70 hover:opacity-100",
                 ),
                 button_next: cn(
                     buttonVariants({ variant: "outline" }),
-                    "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1",
+                    "pointer-events-auto h-8 w-8 bg-background p-0 opacity-70 hover:opacity-100",
                 ),
                 month_grid: "w-full border-collapse space-y-1",
                 weekdays: "flex",