From 04bdb7bf0de84c288212fb80018bd2b240b2bfba Mon Sep 17 00:00:00 2001
From: AmirReza Jamali <amir7jamali.ar@yahoo.com>
Date: Sat, 2 May 2026 13:04:56 +0330
Subject: [PATCH] refactor(tender-details): update ShowcaseSection styling for
 improved layout consistency

- Replaced TIMELINE_SHOWCASE with SHOWCASE_CENTERED_BODY for better vertical alignment of content in ShowcaseSection components.
- Ensured consistent styling across various sections including Tender ID, Buyer organization, and timeline details.
---
 src/app/tenders/[details]/page.tsx | 34 ++++++++++++++++++------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/tenders/[details]/page.tsx b/src/app/tenders/[details]/page.tsx
index 91171b2..3729900 100644
--- a/src/app/tenders/[details]/page.tsx
+++ b/src/app/tenders/[details]/page.tsx
@@ -49,10 +49,11 @@ function ExternalLinkIcon({ className }: { className?: string }) {
   );
 }
 
-/** Grid row stretch: center value vertically under the title */
-const TIMELINE_SHOWCASE = {
+/** Body area only: center content in the card; ShowcaseSection `title` is unchanged */
+const SHOWCASE_CENTERED_BODY = {
   rootClassName: "flex h-full min-h-0 flex-col",
-  className: "flex min-h-0 flex-1 flex-col justify-center",
+  className:
+    "flex min-h-0 flex-1 flex-col items-center justify-center text-center",
 } as const;
 
 const TenderDetails = ({ params }: IProps) => {
@@ -134,23 +135,30 @@ const TenderDetails = ({ params }: IProps) => {
           <div>
             <SectionHeading>Procurement</SectionHeading>
             <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-5">
-              <ShowcaseSection title="Tender ID">
+              <ShowcaseSection title="Tender ID" {...SHOWCASE_CENTERED_BODY}>
                 <span className="font-medium text-dark dark:text-white">{tender.tender_id}</span>
               </ShowcaseSection>
-              <ShowcaseSection title="Buyer organization" className="sm:col-span-2 xl:col-span-1 2xl:col-span-2">
+              <ShowcaseSection
+                title="Buyer organization"
+                rootClassName={SHOWCASE_CENTERED_BODY.rootClassName}
+                className={cn(
+                  "sm:col-span-2 xl:col-span-1 2xl:col-span-2",
+                  SHOWCASE_CENTERED_BODY.className,
+                )}
+              >
                 <span className="font-medium text-dark dark:text-white">
                   {tender.buyer_organization.name}
                 </span>
               </ShowcaseSection>
-              <ShowcaseSection title="Notice publication ID">
+              <ShowcaseSection title="Notice publication ID" {...SHOWCASE_CENTERED_BODY}>
                 <span className="font-medium text-dark dark:text-white">
                   {tender.notice_publication_id}
                 </span>
               </ShowcaseSection>
-              <ShowcaseSection title="Procedure code">
+              <ShowcaseSection title="Procedure code" {...SHOWCASE_CENTERED_BODY}>
                 <span className="font-medium text-dark dark:text-white">{tender.procedure_code}</span>
               </ShowcaseSection>
-              <ShowcaseSection title="Procurement type">
+              <ShowcaseSection title="Procurement type" {...SHOWCASE_CENTERED_BODY}>
                 <span className="font-medium text-dark dark:text-white">
                   {tender.procurement_type_code}
                 </span>
@@ -161,28 +169,28 @@ const TenderDetails = ({ params }: IProps) => {
           <div>
             <SectionHeading>Timeline</SectionHeading>
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
-              <ShowcaseSection title="Application deadline" {...TIMELINE_SHOWCASE}>
+              <ShowcaseSection title="Application deadline" {...SHOWCASE_CENTERED_BODY}>
                 <time className="font-medium tabular-nums text-dark dark:text-white">
                   {msToDate(tender.application_deadline ?? 0)}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Publication date" {...TIMELINE_SHOWCASE}>
+              <ShowcaseSection title="Publication date" {...SHOWCASE_CENTERED_BODY}>
                 <time className="font-medium tabular-nums text-dark dark:text-white">
                   {msToDate(tender.publication_date ?? 0)}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Submission deadline" {...TIMELINE_SHOWCASE}>
+              <ShowcaseSection title="Submission deadline" {...SHOWCASE_CENTERED_BODY}>
                 <time className="font-medium tabular-nums text-dark dark:text-white">
                   {msToDate(tender.submission_deadline ?? 0)}
                 </time>
               </ShowcaseSection>
-              <ShowcaseSection title="Tender deadline" {...TIMELINE_SHOWCASE}>
+              <ShowcaseSection title="Tender deadline" {...SHOWCASE_CENTERED_BODY}>
                 <time className="font-medium tabular-nums text-dark dark:text-white">
                   {msToDate(tender.tender_deadline ?? 0)}
                 </time>
               </ShowcaseSection>
               {submissionUrl && (
-                <ShowcaseSection title="Submission URL" {...TIMELINE_SHOWCASE}>
+                <ShowcaseSection title="Submission URL" {...SHOWCASE_CENTERED_BODY}>
                   <Link
                     href={submissionUrl}
                     target="_blank"