feat: container style adjustments

Author: n1ru4l

app/lib/main-section.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 export function MainSection(props: { children: React.ReactNode }) {
   return (
-    <main className="min-h-screen px-4 py-0 flex-1 flex flex-column justify-center">
+    <main className="min-h-screen px-4 py-0 flex-1 flex flex-column max-w-screen-md mx-auto">
       {props.children}
     </main>
   );

app/pages/index.tsx

@@ -50,8 +50,8 @@ const Home: NextPage = () => {
       </Head>
 
       <MainSection>
-        <section className="text-gray-600 body-font overflow-hidden">
-          <div className="container px-5 py-24 mx-auto">
+        <section className="text-gray-600 body-font overflow-hidden w-full">
+          <div className="container px-3 py-24 mx-auto">
             <div className="-my-8">
               {indexQuery?.data?.feed?.edges.map((edge) => (
                 <FeedItem post={edge.node!} key={edge.cursor} />

app/pages/item/[postId].tsx

@@ -112,16 +112,18 @@ const Item: NextPage = () => {
               <title>supanews | {post.node?.title}</title>
               <meta name="description" content={post.node?.url} />
             </Head>
-            <section className="text-gray-600 body-font overflow-hidden">
+            <section className="text-gray-600 body-font overflow-hidden w-full">
               <div className="container px-5 py-24 mx-auto">
                 <FeedItem post={post.node} key={post.cursor} />
 
-                <PostCommentForm postId={post.node.id} />
+                <div className="max-w-md">
+                  <PostCommentForm postId={post.node.id} />
 
-                <div className="mt-10">
-                  {post.node?.comments?.edges.map((edge) => (
-                    <CommentItem comment={edge.node!} key={edge.cursor} />
-                  ))}
+                  <div className="mt-10">
+                    {post.node?.comments?.edges.map((edge) => (
+                      <CommentItem comment={edge.node!} key={edge.cursor} />
+                    ))}
+                  </div>
                 </div>
               </div>
             </section>

app/pages/newest.tsx

@@ -43,7 +43,7 @@ const Newest: NextPage = () => {
       </Head>
 
       <MainSection>
-        <section className="text-gray-600 body-font overflow-hidden">
+        <section className="text-gray-600 body-font overflow-hidden w-full">
           <div className="container px-5 py-24 mx-auto">
             <div className="-my-8">
               {newestQuery?.data?.feed?.edges.map((edge) => (