From cb01cd6b8eec87ca75978ea25d8d7768fc0ce82d Mon Sep 17 00:00:00 2001
From: Joost De Cock <joost@joost.at>
Date: Mon, 30 May 2022 16:40:51 +0200
Subject: [PATCH] fix(www): Layout fixed to blog pages

---
 packages/freesewing.org/pages/blog/[slug].js       |  4 ++--
 packages/freesewing.org/pages/blog/index.js        | 14 +++++++-------
 .../freesewing.shared/components/wrappers/mdx.js   |  4 +++-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/freesewing.org/pages/blog/[slug].js b/packages/freesewing.org/pages/blog/[slug].js
index 4a507a6bdb9..6f71223a245 100644
--- a/packages/freesewing.org/pages/blog/[slug].js
+++ b/packages/freesewing.org/pages/blog/[slug].js
@@ -1,4 +1,4 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import TimeAgo from 'react-timeago'
 import MdxWrapper from 'shared/components/wrappers/mdx'
@@ -68,7 +68,7 @@ const PostPage = ({ post, author }) => {
         <meta property="og:locale" content="en_US" key='locale' />
         <meta property="og:site_name" content="freesewing.dev" key='site' />
       </Head>
-      <article className="mb-12">
+      <article className="mb-12 px-8">
         <div className="flex flex-row justify-between text-sm mb-1 mt-2">
           <span><TimeAgo date={post.date} /> [{post.date}]</span>
           <span>
diff --git a/packages/freesewing.org/pages/blog/index.js b/packages/freesewing.org/pages/blog/index.js
index 1c66721aaf9..8575b633170 100644
--- a/packages/freesewing.org/pages/blog/index.js
+++ b/packages/freesewing.org/pages/blog/index.js
@@ -1,4 +1,4 @@
-import Page from 'shared/components/wrappers/page.js'
+import Page from 'site/components/wrappers/page.js'
 import useApp from 'site/hooks/useApp.js'
 import Link from 'next/link'
 import TimeAgo from 'react-timeago'
@@ -18,12 +18,12 @@ const Preview = ({ app, post }) => (
           backgroundSize: 'cover',
         }}>
           <div className="grow"></div>
-          <div className="text-right mb-8">
+          <div className="text-right mb-3 lg:mb-8">
             <div className={`
-              bg-neutral text-neutral-content
-              bg-opacity-90
-              px-8 text-right
-              py-4
+              bg-neutral text-neutral-content bg-opacity-90 text-right
+              px-4 py-1
+              lg:px-8 lg:py-4
+
             `}>
               <h5 className={`
                 text-neutral-content
@@ -55,7 +55,7 @@ const BlogIndexPage = (props) => {
 
   return (
     <Page app={app} title={t('blog')} slug='blog'>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2 px-8">
         {props.posts.map(post => <Preview app={app} post={post} key={post.slug}/>)
         }
       </div>
diff --git a/packages/freesewing.shared/components/wrappers/mdx.js b/packages/freesewing.shared/components/wrappers/mdx.js
index 69abbd4718d..3927f91bd4e 100644
--- a/packages/freesewing.shared/components/wrappers/mdx.js
+++ b/packages/freesewing.shared/components/wrappers/mdx.js
@@ -15,6 +15,8 @@ import customComponents from 'shared/components/mdx'
 // Previous-Next navigation
 import PrevNext from '../mdx/prev-next'
 
+const Null = (props) => null
+
 const MdxWrapper = ({mdx, app, t, components={}}) => {
 
   const [mdxModule, setMdxModule] = useState()
@@ -36,7 +38,7 @@ const MdxWrapper = ({mdx, app, t, components={}}) => {
   }
 
   // React component for MDX content
-  const MdxContent = mdxModule ? mdxModule.default : Fragment
+  const MdxContent = mdxModule ? mdxModule.default : Null
 
   return app
     ? (