refactor: improve layout structure and consistency across components

- Refactored layout structure in multiple components to enhance consistency and maintainability by introducing outer and inner wrapper classes.
- Updated the `MonthNavHeader` component for shared month navigation functionality, improving code reuse.
- Adjusted padding and margin properties in various components to ensure a cohesive design and better responsiveness.
- Removed unnecessary padding from certain elements to streamline the layout and improve visual clarity.

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

@@ -5,13 +5,9 @@
 
 "use client";
 
-import { Button } from "@/components/ui/button";
 import { useTranslation } from "@/i18n/use-translation";
 import { cn } from "@/lib/utils";
-import {
-  ChevronLeft as ChevronLeftIcon,
-  ChevronRight as ChevronRightIcon,
-} from "lucide-react";
+import { MonthNavHeader } from "@/components/calendar/MonthNavHeader";
 
 export interface CalendarHeaderProps {
   /** Currently displayed month (used for title). */
@@ -30,51 +26,19 @@ export function CalendarHeader({
   onNextMonth,
   className,
 }: CalendarHeaderProps) {
-  const { t, monthName, weekdayLabels } = useTranslation();
-  const year = month.getFullYear();
-  const monthIndex = month.getMonth();
+  const { weekdayLabels } = useTranslation();
   const labels = weekdayLabels();
 
   return (
     <header className={cn("flex flex-col", className)}>
-      <div className="flex items-center justify-between mb-3">
-        <Button
-          type="button"
-          variant="secondary"
-          size="icon"
-          className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
-          aria-label={t("nav.prev_month")}
-          disabled={disabled}
-          onClick={onPrevMonth}
-        >
-          <ChevronLeftIcon className="size-5" aria-hidden />
-        </Button>
-        <div className="flex min-h-[2rem] flex-col items-center justify-center gap-0">
-          <h1
-            className="m-0 flex flex-col items-center justify-center gap-0 leading-none"
-            aria-live="polite"
-            aria-atomic="true"
-          >
-            <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
-          type="button"
-          variant="secondary"
-          size="icon"
-          className="size-10 rounded-[10px] bg-surface text-accent hover:bg-[var(--surface-hover)] focus-visible:outline-accent active:scale-95 disabled:opacity-50"
-          aria-label={t("nav.next_month")}
-          disabled={disabled}
-          onClick={onNextMonth}
-        >
-          <ChevronRightIcon className="size-5" aria-hidden />
-        </Button>
-      </div>
+      <MonthNavHeader
+        month={month}
+        disabled={disabled}
+        onPrevMonth={onPrevMonth}
+        onNextMonth={onNextMonth}
+        ariaLive
+        className="mb-3"
+      />
       <div className="grid grid-cols-7 gap-0.5 mb-1.5 text-center text-[0.75rem] text-muted">
         {labels.map((label, i) => (
           <span key={i} aria-hidden>