fix(blog): container on blog list page broken (#1315)

![image](https://github.com/user-attachments/assets/68086a8b-bbd8-4490-8ec5-dcb2fd9f3245)

Co-authored-by: Tyler <[email protected]>

Author: tylersayshi

packages/website/src/components/post-list.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import { Link } from 'waku';
 
 type PostListItemProps = {
@@ -69,3 +70,9 @@ export const PostList = ({
     ))}
   </ul>
 );
+
+export const PostListContainer = ({ children }: { children: ReactNode }) => (
+  <div className="relative z-10 mx-auto w-full max-w-[80ch] pt-16 text-white lg:pt-36 xl:-right-[calc(296px/2)] 2xl:right-auto">
+    {children}
+  </div>
+);

packages/website/src/pages/blog/index.tsx

@@ -5,15 +5,17 @@ import { Page } from '../../components/page';
 import { Meta } from '../../components/meta';
 import { getAuthor } from '../../lib/get-author';
 import type { BlogFrontmatter } from '../../types';
-import { PostList } from '../../components/post-list';
+import { PostList, PostListContainer } from '../../components/post-list';
 
 export default async function BlogIndexPage() {
   const articles = await getArticles();
 
   return (
     <Page>
       <Meta title="Waku blog" description="The official Waku developer blog." />
-      <PostList posts={articles} path="blog" />
+      <PostListContainer>
+        <PostList posts={articles} path="blog" />
+      </PostListContainer>
     </Page>
   );
 }

packages/website/src/pages/guides/index.tsx

@@ -4,7 +4,7 @@ import { compileMDX } from 'next-mdx-remote/rsc';
 import { Page } from '../../components/page';
 import { Meta } from '../../components/meta';
 import type { BlogFrontmatter } from '../../types';
-import { PostList } from '../../components/post-list';
+import { PostList, PostListContainer } from '../../components/post-list';
 
 export default async function BlogIndexPage() {
   const articles = await getArticles();
@@ -15,14 +15,14 @@ export default async function BlogIndexPage() {
         title="Waku guide"
         description="The guides for working with Waku."
       />
-      <div className="relative z-10 mx-auto w-full max-w-[80ch] pt-16 text-white lg:pt-36 xl:-right-[calc(296px/2)] 2xl:right-auto">
+      <PostListContainer>
         <p className="bg-gray-950/90 mb-16 rounded-xl border border-gray-800 p-4 text-white sm:p-6 lg:p-12">
           Our guides walk through hosting instructions, framework behavior,
           developer tooling, and more! We will talk through unstable APIs here,
           so you can help experiment with our new and fun features.
         </p>
         <PostList posts={articles} path="guides" />
-      </div>
+      </PostListContainer>
     </Page>
   );
 }