From 1b72eb2e338474dd6ecf23d4af44c061d7e8711e Mon Sep 17 00:00:00 2001
From: Inderpal Singh <inderpal.singh@lnds.lu>
Date: Mon, 29 Jul 2024 14:52:04 +0200
Subject: [PATCH] fix: alignment of tile and dates on small screens

---
 src/app/requests/entitlements/EntitlementCard.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/requests/entitlements/EntitlementCard.tsx b/src/app/requests/entitlements/EntitlementCard.tsx
index 5bff8b01..09bf1dcc 100644
--- a/src/app/requests/entitlements/EntitlementCard.tsx
+++ b/src/app/requests/entitlements/EntitlementCard.tsx
@@ -28,7 +28,7 @@ function EntitlementCard({
 
   return (
     <>
-      <div className="flex justify-between">
+      <div className="flex justify-between flex-col space-y-2 md:flex-row md:space-y-0 md:items-center">
         <Link href={`/datasets/${dataset.id}`} className="hover:underline">
           <h3 className="text-xl text-primary md:text-2xl">{dataset.title}</h3>
         </Link>
@@ -43,7 +43,9 @@ function EntitlementCard({
           </p>
         </div>
       </div>
-      <p className="mb-4 text-sm text-info md:text-base">{dataset.catalogue}</p>
+      <p className="mt-4 md:mt-0 mb-4 text-sm text-info md:text-base">
+        {dataset.catalogue}
+      </p>
       {truncatedDesc && (
         <p className="mb-4 text-xs md:text-sm">{truncatedDesc}</p>
       )}