improve relatedarticles layout

astro.config.ts

@@ -33,4 +33,5 @@ export default defineConfig({
   experimental: {
     responsiveImages: true,
   },
+  prefetch: true,
 });

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>

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
 }