use Container in pages

apps/web/app/(main)/profile/[telegramId]/page.tsx

@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
 import { ContactDataCard, PersonCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
@@ -19,10 +20,10 @@ export default async function ProfilePage(props: Readonly<Props>) {
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageHeader title="Профиль контакта" />
-      <div className="space-y-4">
+      <Container className="px-0">
         <PersonCard telegramId={telegramId} />
         <ContactDataCard telegramId={telegramId} />
-      </div>
+      </Container>
     </HydrationBoundary>
   );
 }

apps/web/app/(main)/profile/page.tsx

@@ -1,4 +1,5 @@
 import { getProfile } from '@/actions/profile';
+import { Container } from '@/components/layout';
 import { LinksCard, PersonCard, ProfileDataCard } from '@/components/profile';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
@@ -12,11 +13,11 @@ export default async function ProfilePage() {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <div className="space-y-4">
+      <Container className="px-0">
         <PersonCard />
         <ProfileDataCard />
         <LinksCard />
-      </div>
+      </Container>
     </HydrationBoundary>
   );
 }

apps/web/app/(main)/profile/schedule/page.tsx

@@ -1,4 +1,5 @@
 import { HorizontalDivider } from '@/components/common/divider';
+import { Container } from '@/components/layout';
 import { PageHeader } from '@/components/navigation';
 import { AddSlotForm, SlotsCalendar, SlotsList } from '@/components/schedule';
 import { ScheduleSlotsProvider } from '@/context/schedule-slots';
@@ -7,10 +8,12 @@ export default function SchedulePage() {
   return (
     <ScheduleSlotsProvider>
       <PageHeader title="График работы" />
-      <SlotsCalendar />
-      <SlotsList />
-      <HorizontalDivider className="px-4" />
-      <AddSlotForm />
+      <Container className="px-0">
+        <SlotsCalendar />
+        <SlotsList />
+        <HorizontalDivider className="px-4" />
+        <AddSlotForm />
+      </Container>
     </ScheduleSlotsProvider>
   );
 }

apps/web/components/layout/container.tsx

@@ -1,5 +1,9 @@
+import { cn } from '@repo/ui/lib/utils';
 import { type PropsWithChildren } from 'react';
 
-export function Container({ children }: Readonly<PropsWithChildren>) {
-  return <div className="space-y-4 px-4">{children}</div>;
+export function Container({
+  children,
+  className,
+}: Readonly<PropsWithChildren> & { readonly className?: string }) {
+  return <div className={cn('space-y-4 px-4', className)}>{children}</div>;
 }

apps/web/components/schedule/time-slots/components/add-slot-form.tsx

@@ -33,7 +33,7 @@ export const AddSlotForm = withContext(ContextProvider)(function () {
   };
 
   return (
-    <div className="p-4">
+    <div className="px-4">
       <form className="grid grid-cols-[1fr_1fr_auto] items-center gap-2" onSubmit={handleSubmit}>
         <AddTimePair />
         <Button className="rounded-full" type="submit">

apps/web/components/schedule/time-slots/components/slots-list.tsx

@@ -8,13 +8,13 @@ export function SlotsList() {
 
   if (isLoading)
     return (
-      <div className="flex items-center justify-center p-4">
+      <div className="flex items-center justify-center px-4">
         <Loader className="animate-spin" />
       </div>
     );
 
   return (
-    <div className="flex flex-col gap-4 p-4">
+    <div className="flex flex-col gap-4 px-4">
       {slots?.map((slot) => {
         if (!slot?.documentId) return null;