From a8d4afb101201b149320464cf0d9cb04a8eb43b3 Mon Sep 17 00:00:00 2001
From: Nikolay Tatarinov <me@arnike.ru>
Date: Wed, 4 Mar 2026 11:01:17 +0300
Subject: [PATCH] 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.
---
 .../src/components/calendar/CalendarHeader.tsx        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/webapp-next/src/components/calendar/CalendarHeader.tsx b/webapp-next/src/components/calendar/CalendarHeader.tsx
index c11df6a..f58e8ff 100644
--- a/webapp-next/src/components/calendar/CalendarHeader.tsx
+++ b/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