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/CalendarPage.tsx

@@ -168,41 +168,43 @@ export function CalendarPage({ isAllowed, initDataRaw }: CalendarPageProps) {
   }, [isAdmin, router]);
 
   return (
-    <div className="content-safe mx-auto flex min-h-[var(--tg-viewport-stable-height,100vh)] w-full max-w-[var(--max-width-app)] flex-col bg-background px-3 pb-6">
-      <div
-        ref={calendarStickyRef}
-        className="sticky top-[var(--app-safe-top)] z-10 min-h-[var(--calendar-block-min-height)] bg-background pb-2 touch-pan-y"
-      >
-        <CalendarHeader
-          month={currentMonth}
-          disabled={navDisabled}
-          onPrevMonth={handlePrevMonth}
-          onNextMonth={handleNextMonth}
-        />
-        <CalendarGrid
-          currentMonth={currentMonth}
+    <div className="content-safe min-h-[var(--tg-viewport-stable-height,100vh)] bg-background">
+      <div className="mx-auto flex w-full max-w-[var(--max-width-app)] flex-col">
+        <div
+          ref={calendarStickyRef}
+          className="sticky top-[var(--app-safe-top)] z-10 min-h-[var(--calendar-block-min-height)] bg-background pb-2 touch-pan-y"
+        >
+          <CalendarHeader
+            month={currentMonth}
+            disabled={navDisabled}
+            onPrevMonth={handlePrevMonth}
+            onNextMonth={handleNextMonth}
+          />
+          <CalendarGrid
+            currentMonth={currentMonth}
+            duties={duties}
+            calendarEvents={calendarEvents}
+            onDayClick={handleDayClick}
+          />
+        </div>
+
+        {error && (
+          <ErrorState message={error} onRetry={retry} className="my-3" />
+        )}
+        {!error && (
+          <DutyList
+            scrollMarginTop={stickyBlockHeight}
+            className="mt-2"
+          />
+        )}
+
+        <DayDetail
+          ref={dayDetailRef}
           duties={duties}
           calendarEvents={calendarEvents}
-          onDayClick={handleDayClick}
+          onClose={handleCloseDayDetail}
         />
       </div>
-
-      {error && (
-        <ErrorState message={error} onRetry={retry} className="my-3" />
-      )}
-      {!error && (
-        <DutyList
-          scrollMarginTop={stickyBlockHeight}
-          className="mt-2"
-        />
-      )}
-
-      <DayDetail
-        ref={dayDetailRef}
-        duties={duties}
-        calendarEvents={calendarEvents}
-        onClose={handleCloseDayDetail}
-      />
     </div>
   );
 }