From 794cc9d99cfaccd8b1b26a2a18aaa446ccf04e9f Mon Sep 17 00:00:00 2001
From: Mateusz Baginski <cziken58@gmail.com>
Date: Sat, 2 Nov 2024 16:37:01 +0100
Subject: [PATCH] feat(frontend): better align of grid

---
 .../src/components/blog/recent-articles.astro    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/frontend/src/components/blog/recent-articles.astro b/apps/frontend/src/components/blog/recent-articles.astro
index 22e53688..6e705946 100644
--- a/apps/frontend/src/components/blog/recent-articles.astro
+++ b/apps/frontend/src/components/blog/recent-articles.astro
@@ -16,10 +16,18 @@ const articles = await getArticles({
 <section class:list={['max-sm:py-6 py-16 pt-8 recent-articles', className]}>
   <div class="container mx-auto px-4">
     <h2 class="mb-8 text-3xl font-semibold text-center">Recent Articles</h2>
-    <div class="grid grid-cols-1 max-sm:gap-4 gap-6 lg:gap-16 md:grid-cols-3">
-      {articles.map(article => (
-        <ArticleCard article={article} />
-      ))}
+    <div
+      class={
+        articles.length < 3
+          ? 'flex flex-col md:flex-row items-top gap-6 max-w-[1100px] mx-auto'
+          : 'grid grid-cols-1 max-sm:gap-4 gap-6 lg:gap-16 md:grid-cols-3'
+      }
+    >
+      {
+        articles.length > 0
+          ? articles.map(article => <ArticleCard article={article} />)
+          : <p class="text-center col-span-full">No articles available.</p>
+      }
     </div>
   </div>
 </section>