refactor: improve layout and styling in CalendarHeader component

- Adjusted the layout of the CalendarHeader to enhance visual hierarchy by separating the year and month display.
- Updated CSS classes for better alignment and spacing, ensuring a more polished user interface.
- Enhanced accessibility by maintaining aria attributes for live updates.

webapp-next/src/components/calendar/CalendarHeader.tsx

@@ -49,13 +49,18 @@ export function CalendarHeader({
         >
           <ChevronLeftIcon className="size-5" aria-hidden />
         </Button>
-        <div className="flex flex-col items-center gap-0.5">
+        <div className="flex min-h-[2rem] flex-col items-center justify-center gap-0">
           <h1
-            className="m-0 flex items-center justify-center gap-2 text-[1.1rem] font-semibold sm:text-[1.25rem]"
+            className="m-0 flex flex-col items-center justify-center gap-0 leading-none"
             aria-live="polite"
             aria-atomic="true"
           >
-            {monthName(monthIndex)} {year}
+            <span className="text-xs font-normal leading-none text-muted">
+              {year}
+            </span>
+            <span className="text-[1.1rem] font-semibold leading-tight sm:text-[1.25rem]">
+              {monthName(monthIndex)}
+            </span>
           </h1>
         </div>
         <Button