From 1ebdd2bd9c83db8a3e2954a96343e76ef7b0990e Mon Sep 17 00:00:00 2001
From: Troy <hello@troylusty.com>
Date: Sun, 19 Jan 2025 15:08:48 +0000
Subject: [PATCH] improve relatedarticles layout

---
 astro.config.ts                      | 1 +
 src/components/Button.astro          | 2 +-
 src/components/RelatedArticles.astro | 6 +-----
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 1eb7f9f..0f467b7 100644
--- a/astro.config.ts
+++ b/astro.config.ts
@@ -33,4 +33,5 @@ export default defineConfig({
   experimental: {
     responsiveImages: true,
   },
+  prefetch: true,
 });
diff --git a/src/components/Button.astro b/src/components/Button.astro
index 0f054c9..aa1c22f 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -9,7 +9,7 @@ const { href, link } = Astro.props;
 
 <a href={`${href}`}>
   <div
-    class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent"
+    class="m-4 flex w-fit animate-reveal flex-row items-center gap-1 justify-self-center rounded-full bg-tertiary px-2 py-1 text-sm font-medium capitalize text-primary opacity-0 transition-colors [animation-delay:0.1s] hover:bg-accent text-center text-nowrap"
   >
     {link}
   </div>
diff --git a/src/components/RelatedArticles.astro b/src/components/RelatedArticles.astro
index 3147eed..b99fa4c 100644
--- a/src/components/RelatedArticles.astro
+++ b/src/components/RelatedArticles.astro
@@ -19,19 +19,15 @@ const next = items[(index + 1) % items.length];
 
 {
   items.length > 1 ? (
-    <div class="mx-auto mt-8 flex max-w-prose justify-between gap-4 md:gap-0">
-      <div class="group flex w-fit flex-row items-center justify-between">
+    <div class="mx-auto mt-8 flex max-w-prose md:flex-row justify-between gap-4 md:gap-0 flex-col-reverse">
         <Button
           href={`/${prev.collection}/${prev.slug}`}
           link={`Previous: ${prev.data.title}`}
         />
-      </div>
-      <div class="group flex w-fit flex-row items-center justify-between self-end">
         <Button
           href={`/${next.collection}/${next.slug}`}
           link={`Next: ${next.data.title}`}
         />
-      </div>
     </div>
   ) : null
 }