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/current-duty/CurrentDutyView.tsx

@@ -168,7 +168,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
   if (state === "loading") {
     return (
       <div
-        className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-4"
+        className="flex min-h-[50vh] flex-col items-center justify-center gap-4"
         role="status"
         aria-live="polite"
         aria-label={t("loading")}
@@ -221,7 +221,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
       loadTodayDuties();
     };
     return (
-      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-4">
+      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4">
         <Card className="w-full max-w-[var(--max-width-app)]">
           <CardContent className="pt-6">
             <p className="text-error">{errorMessage}</p>
@@ -249,7 +249,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
 
   if (!duty) {
     return (
-      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-4">
+      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4">
         <Card className="current-duty-card--no-duty w-full max-w-[var(--max-width-app)] border-t-4 border-t-muted">
           <CardHeader>
             <CardTitle>{t("current_duty.title")}</CardTitle>
@@ -307,7 +307,7 @@ export function CurrentDutyView({ onBack, openedFromPin = false }: CurrentDutyVi
     Boolean(duty.username && String(duty.username).trim());
 
   return (
-    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4 px-4">
+    <div className="flex min-h-[50vh] flex-col items-center justify-center gap-4">
       <Card
         className="current-duty-card w-full max-w-[var(--max-width-app)] border-t-4 border-t-duty animate-in fade-in-0 slide-in-from-bottom-4 duration-300 motion-reduce:animate-none motion-reduce:duration-0"
         role="article"