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/states/FullScreenStateShell.tsx

@@ -20,8 +20,9 @@ export interface FullScreenStateShellProps {
   className?: string;
 }
 
-const WRAPPER_CLASS =
-  "content-safe flex min-h-[var(--tg-viewport-stable-height,100vh)] flex-col items-center justify-center gap-4 bg-background px-4 text-foreground";
+const OUTER_CLASS =
+  "content-safe flex min-h-[var(--tg-viewport-stable-height,100vh)] flex-col items-center justify-center gap-4 bg-background text-foreground";
+const INNER_CLASS = "mx-auto w-full max-w-[var(--max-width-app)] px-3 flex flex-col items-center gap-4";
 
 /**
  * Full-screen centered shell with title, optional description, and primary action.
@@ -37,15 +38,17 @@ export function FullScreenStateShell({
 }: FullScreenStateShellProps) {
   return (
     <div
-      className={className ? `${WRAPPER_CLASS} ${className}` : WRAPPER_CLASS}
+      className={className ? `${OUTER_CLASS} ${className}` : OUTER_CLASS}
       role={role}
     >
-      <h1 className="text-xl font-semibold">{title}</h1>
-      {description != null && (
-        <p className="text-center text-muted-foreground">{description}</p>
-      )}
-      {children}
-      {primaryAction}
+      <div className={INNER_CLASS}>
+        <h1 className="text-xl font-semibold">{title}</h1>
+        {description != null && (
+          <p className="text-center text-muted-foreground">{description}</p>
+        )}
+        {children}
+        {primaryAction}
+      </div>
     </div>
   );
 }