chore: align styles

components/MyPages/Blocks/Stays/Soonest/index.tsx

@@ -1,5 +1,7 @@
 import { serverClient } from "@/lib/trpc/server"
 
+import MaxWidth from "@/components/MaxWidth"
+
 import Header from "../Header"
 import StayList from "../StayList"
 import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
@@ -17,13 +19,13 @@ export default async function SoonestStays({
   const stays = await serverClient().user.stays.soonestUpcoming()
 
   return (
-    <section className={styles.container}>
+    <MaxWidth className={styles.container} tag="section">
       <Header title={title} subtitle={subtitle} link={link} />
       {stays.length ? (
         <StayList lang={lang} stays={stays} />
       ) : (
         <EmptyUpcomingStaysBlock />
       )}
-    </section>
+    </MaxWidth>
   )
 }

components/MyPages/Blocks/Stays/Soonest/soonest.module.css

@@ -1,3 +1,4 @@
 .container {
-  max-width: var(--max-width);
+  display: grid;
+  gap: 1.5rem;
 }