Make code blocks fit content

Author: ysthakur

src/layouts/BlogPost.astro

@@ -36,14 +36,16 @@ const { title, description, author, pubDate, updatedDate, heroImage } =
 </BaseLayout>
 
 <style>
-  main {
-    width: calc(100% - 2em);
-    max-width: 100%;
-    margin: 0;
+  article {
+    max-width: 90ch;
+    margin-left: auto;
+    margin-right: auto;
   }
+
   .hero-image {
     width: 100%;
   }
+
   .hero-image img {
     display: block;
     margin: 0 auto;
@@ -66,4 +68,13 @@ const { title, description, author, pubDate, updatedDate, heroImage } =
     color: rgb(var(--gray));
     font-style: italic;
   }
+
+  :global(.astro-code) {
+    width: fit-content;
+    max-width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+
+    padding: 10px;
+  }
 </style>