re-enable comments on non-post pages

components/comments/comments-skeleton.tsx

@@ -1,8 +1,9 @@
 import Skeleton from "@/components/ui/skeleton";
+import Wrapper from "./comments-wrapper";
 
 const CommentsSkeleton = () => {
   return (
-    <div className="mx-auto max-w-3xl space-y-6">
+    <Wrapper>
       <Skeleton className="h-32 w-full" />
 
       <div className="flex gap-4">
@@ -19,7 +20,7 @@ const CommentsSkeleton = () => {
           </div>
         </div>
       </div>
-    </div>
+    </Wrapper>
   );
 };
 

components/comments/comments-wrapper.tsx

@@ -0,0 +1,11 @@
+import { cn } from "@/lib/utils";
+
+const CommentsWrapper = ({ className, children }: { className?: string; children: React.ReactNode }) => {
+  return (
+    <section id="comments" className={cn("isolate mt-8 mb-10 min-h-36 w-full border-t-2 pt-8", className)}>
+      <div className="mx-auto w-full max-w-3xl space-y-6 text-base leading-normal [&_p]:my-auto">{children}</div>
+    </section>
+  );
+};
+
+export default CommentsWrapper;

components/comments/comments.tsx

@@ -1,4 +1,5 @@
 import { headers } from "next/headers";
+import Wrapper from "./comments-wrapper";
 import Form from "./comment-form";
 import Thread from "./comment-thread";
 import SignIn from "./sign-in";
@@ -27,14 +28,14 @@ const Comments = async ({ slug, closed = false }: { slug: string; closed?: boole
   const rootComments = commentsByParentId["root"] || [];
 
   return (
-    <div className="space-y-6">
+    <Wrapper>
       {closed ? (
         <div className="bg-muted/40 flex min-h-32 items-center justify-center rounded-lg p-6">
           <p className="text-center font-medium">Comments are closed for this post.</p>
         </div>
       ) : !session ? (
-        <div className="bg-muted/40 flex flex-col items-center justify-center rounded-lg p-6">
-          <p className="mb-4 text-center font-medium">Join the discussion by signing in:</p>
+        <div className="bg-muted/40 flex flex-col items-center justify-center gap-y-4 rounded-lg p-6">
+          <p className="text-center font-medium">Join the discussion by signing in:</p>
           <SignIn callbackPath={`/${slug}#comments`} />
         </div>
       ) : (
@@ -57,7 +58,7 @@ const Comments = async ({ slug, closed = false }: { slug: string; closed?: boole
           ))}
         </div>
       )}
-    </div>
+    </Wrapper>
   );
 };