refactor layout

frontend/app/create/item/page.tsx

@@ -4,14 +4,14 @@ import { ItemForm } from "@/components/listings/form/ItemForm";
 
 export default function CreateItemPage() {
   return (
-    <div className="container mx-auto w-full max-w-[96rem] px-12 pt-4 pb-12">
+    <>
       <Link href="/items">
         <BackButton />
       </Link>
 
       <h1 className="mb-8 pt-2 text-3xl font-bold">New Item</h1>
 
       <ItemForm />
-    </div>
+    </>
   );
 }

frontend/app/create/sublet/page.tsx

@@ -4,14 +4,14 @@ import { SubletForm } from "@/components/listings/form/SubletForm";
 
 export default function CreateSubletPage() {
   return (
-    <div className="container mx-auto w-full max-w-[96rem] px-12 pt-6 pb-12">
+    <>
       <Link href="/sublets">
         <BackButton />
       </Link>
 
       <h1 className="mb-8 pt-2 text-3xl font-bold">New Sublet</h1>
 
       <SubletForm />
-    </div>
+    </>
   );
 }

frontend/app/layout.tsx

@@ -36,7 +36,9 @@ export default function RootLayout({
         <TanstackQueryProvider>
           <FiltersProvider>
             <Navbar />
-            <div className="flex-grow pt-16">{children}</div>
+            <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-22 pb-12">
+              {children}
+            </div>
             <Footer />
           </FiltersProvider>
           <ReactQueryDevtools />

frontend/app/page.tsx

@@ -21,12 +21,12 @@ export default async function ItemsPage() {
   ]);
 
   return (
-    <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
+    <>
       <PageHeader title="Browse Items" description="Discover the latest items on sale at Penn" />
       <ItemFilters />
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ListingsGrid type="items" currentUser={currentUser} />
       </HydrationBoundary>
-    </div>
+    </>
   );
 }

frontend/app/sublets/page.tsx

@@ -21,12 +21,12 @@ export default async function SubletsPage() {
   ]);
 
   return (
-    <div className="container mx-auto w-full max-w-[96rem] space-y-6 px-12 pt-6">
+    <>
       <PageHeader title="Browse Sublets" description="Find your perfect housing solution at Penn" />
       <SubletFilters />
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ListingsGrid type="sublets" currentUser={currentUser} />
       </HydrationBoundary>
-    </div>
+    </>
   );
 }

frontend/components/listings/detail/ListingDetail.tsx

@@ -65,7 +65,7 @@ export const ListingDetail = ({ listingId }: Props) => {
   const hasLocation = subletCoords?.latitude != null && subletCoords?.longitude != null;
 
   return (
-    <div className="mx-auto flex w-full max-w-[96rem] flex-col p-8 px-4 sm:px-12">
+    <>
       <div className="mb-4 flex items-center justify-between">
         <BackButton />
         <div className="flex items-center gap-3">
@@ -112,6 +112,6 @@ export const ListingDetail = ({ listingId }: Props) => {
           />
         </div>
       </div>
-    </div>
+    </>
   );
 };