From 60e970699eeecb51e5d5fb4a3f3d6fa70b40d4c4 Mon Sep 17 00:00:00 2001
From: Sean Cassiere <33615041+SeanCassiere@users.noreply.github.com>
Date: Tue, 17 Sep 2024 01:33:21 +1200
Subject: [PATCH] refactor: improve the readability of the blog posts (#272)

* fix: `components` prop no-longer exists

* feat: padding on the sides of the content for large screens
---
 app/routes/blog.index.tsx | 7 +------
 app/routes/blog.tsx       | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/routes/blog.index.tsx b/app/routes/blog.index.tsx
index e6d4a1a7..b0c41e0a 100644
--- a/app/routes/blog.index.tsx
+++ b/app/routes/blog.index.tsx
@@ -94,12 +94,7 @@ function BlogIndex() {
                     </div>
                   ) : null}
                   <div className={`text-sm mt-2 text-black dark:text-white`}>
-                    <Markdown
-                      components={{
-                        a: (props) => <span {...props} />,
-                      }}
-                      code={excerpt || ''}
-                    />
+                    <Markdown code={excerpt || ''} />
                   </div>
                 </div>
                 <div>
diff --git a/app/routes/blog.tsx b/app/routes/blog.tsx
index bdad8ee6..5609eb29 100644
--- a/app/routes/blog.tsx
+++ b/app/routes/blog.tsx
@@ -142,7 +142,7 @@ function Blog() {
     <div className="min-h-screen flex flex-col lg:flex-row">
       {smallMenu}
       {largeMenu}
-      <div className="flex-1 min-h-0 flex flex-col">
+      <div className="flex-1 min-h-0 flex flex-col xl:pl-44 xl:pr-56">
         <Outlet />
       </div>
     </div>