From d3cfa2dc8bb0bc416d704f5e6747e7000d222a65 Mon Sep 17 00:00:00 2001
From: Jack Hsu <jack.hsu@gmail.com>
Date: Wed, 17 Apr 2024 23:13:49 -0400
Subject: [PATCH] docs(core): fix cover aspect on blog

---
 nx-dev/nx-dev/pages/blog/[slug].tsx   | 8 ++++----
 nx-dev/ui-blog/src/lib/blog-entry.tsx | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/nx-dev/nx-dev/pages/blog/[slug].tsx b/nx-dev/nx-dev/pages/blog/[slug].tsx
index 7992cc3bbaedaa..f646dd799c8f9d 100644
--- a/nx-dev/nx-dev/pages/blog/[slug].tsx
+++ b/nx-dev/nx-dev/pages/blog/[slug].tsx
@@ -64,14 +64,14 @@ export default function BlogPostDetail({ post }: BlogPostDetailProps) {
           </div>
           <div className="w-16 hidden sm:block" />
         </div>
-        <div id="content-wrapper" className="px-4 lg:px-0">
-          <header className="max-w-3xl mx-auto mt-8 mb-16">
+        <div id="content-wrapper">
+          <header className="max-w-3xl mx-auto mt-8 mb-16 px-4 lg:px-0">
             <h1 className="prose prose-slate dark:prose-invert text-5xl font-semibold text-center">
               {post.title}
             </h1>
           </header>
           {post.cover_image && (
-            <div className="max-w-4xl mx-auto mb-16 w-full aspect-[1.9]">
+            <div className="max-w-screen-lg mx-auto mb-16 w-full aspect-[1.9]">
               <Image
                 className="w-full h-full object-cover"
                 src={post.cover_image}
@@ -81,7 +81,7 @@ export default function BlogPostDetail({ post }: BlogPostDetailProps) {
               />
             </div>
           )}
-          <div className="max-w-3xl mx-auto min-w-0 flex-auto pb-24 lg:pb-16">
+          <div className="max-w-3xl mx-auto min-w-0 flex-auto pb-24 lg:pb-16 px-4 lg:px-0">
             <div className="relative">
               <div
                 data-document="main"
diff --git a/nx-dev/ui-blog/src/lib/blog-entry.tsx b/nx-dev/ui-blog/src/lib/blog-entry.tsx
index 7a84179cf44336..67d0fc09ecbdf4 100644
--- a/nx-dev/ui-blog/src/lib/blog-entry.tsx
+++ b/nx-dev/ui-blog/src/lib/blog-entry.tsx
@@ -28,6 +28,7 @@ export function BlogEntry({ post }: BlogEntryProps) {
         {post.cover_image && (
           <div className="w-full aspect-[1.9] mb-4">
             <Image
+              quality={100}
               className="h-full w-full object-cover"
               src={post.cover_image}
               alt=""