Merge pull request #67 from oxen-io/fix/blog_alignment

Fix blog content alignment
oxen-io · Oct 15, 2024 · e2f1888 · e2f1888
2 parents 47726db + c08ff9a
commit e2f1888
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/apps/foundation/app/(Site)/blog/[slug]/BlogPost.tsx b/apps/foundation/app/(Site)/blog/[slug]/BlogPost.tsx
@@ -37,7 +37,7 @@ export default async function BlogPost({ post }: PostProps) {
     .filter(Boolean);
 
   return (
-    <article className="mx-auto mb-32 mt-4 flex max-w-screen-xl flex-col">
+    <article className="mx-auto mb-32 mt-4 flex max-w-screen-xl flex-col items-start">
       <Link href={SANITY_SCHEMA_URL.POST} prefetch>
         <Button
           data-testid={ButtonDataTestId.Back_To_Blog}
@@ -57,7 +57,11 @@ export default async function BlogPost({ post }: PostProps) {
         mobileImagePosition="below"
       />
       <div className="mt-6 flex flex-row justify-center gap-12 md:mt-12">
-        <PortableText body={body} className="max-w-screen-md" wrapperComponent="section" />
+        <PortableText
+          body={body}
+          className={cn(headings.length && 'max-w-screen-md')}
+          wrapperComponent="section"
+        />
         {headings.length ? (
           <HeadingOutline headings={headings} title={blogDictionary('inThisArticle')} />
         ) : null}

diff --git a/apps/foundation/app/(Site)/blog/[slug]/HeadingOutline.tsx b/apps/foundation/app/(Site)/blog/[slug]/HeadingOutline.tsx
@@ -21,7 +21,7 @@ type HeadingOutlineProps = {
 
 export default function HeadingOutline({ title, headings }: HeadingOutlineProps) {
   return (
-    <nav className="wrap sticky top-12 mt-7 hidden h-max w-max max-w-[25vw] lg:block">
+    <nav className="wrap sticky top-12 hidden h-max w-max max-w-[25vw] lg:block">
       <Typography variant="h2" className="mb-3">
         {title}
       </Typography>
@@ -32,7 +32,7 @@ export default function HeadingOutline({ title, headings }: HeadingOutlineProps)
               onClick={() => {
                 scrollToHeading(heading);
               }}
-              className={cn(navlinkVariants({ active: false }), 'w-full text-wrap text-start')}
+              className={cn(navlinkVariants({ active: false }), 'w-max text-wrap text-start')}
             >
               {heading}
             </button>

diff --git a/apps/foundation/app/(Site)/blog/page.tsx b/apps/foundation/app/(Site)/blog/page.tsx
@@ -53,9 +53,11 @@ export default async function BlogGridPage() {
           <ReadMoreText />
         </PostInfoBlock>
       </Link>
-      <Typography variant="h2" className="mt-12">
-        {blogDictionary('morePosts')}
-      </Typography>
+      {rest?.length ? (
+        <Typography variant="h2" className="mt-12">
+          {blogDictionary('morePosts')}
+        </Typography>
+      ) : null}
       <div className="mt-4 grid grid-cols-1 gap-12 md:mt-8 md:grid-cols-3">
         {rest.map((post, index) => (
           <Link