From aae7faf9dd8e95a3ce0e6516b8d7fcee2bd1dc0f Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 5 Jun 2026 18:39:32 +0800
Subject: [PATCH] fix: adjust mobile popular card layout

---
 src/components/PopularRankList.tsx | 106 +++++++++++++++--------------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index b43268b..f73b295 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -66,7 +66,7 @@ function RankBadge({ index }: { index: number }) {
   if (index < MEDALS.length) {
     return (
       <span
-        className="flex w-7 shrink-0 justify-center text-[22px] leading-none md:w-[76px] md:text-[28px]"
+        className="mt-[15px] flex w-7 shrink-0 justify-center text-[22px] leading-none md:mt-0 md:w-[76px] md:text-[28px]"
         aria-label={`No.${index + 1}`}
       >
         {MEDALS[index]}
@@ -75,7 +75,7 @@ function RankBadge({ index }: { index: number }) {
   }
   return (
     <span
-      className="flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:w-[76px]"
+      className="mt-[15px] flex w-7 shrink-0 justify-center text-lg font-extrabold tabular-nums text-[#7d7e87] md:mt-0 md:w-[76px]"
       aria-label={`No.${index + 1}`}
     >
       {index + 1}
@@ -130,10 +130,10 @@ export function PopularRankRow({
 
   return (
     <article
-      className={`relative grid items-center gap-x-3 gap-y-2 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${
+      className={`relative grid items-center gap-x-3 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:flex md:h-[90px] md:gap-0 md:p-0 ${
         showRank
-          ? "grid-cols-[28px_64px_minmax(0,1fr)]"
-          : "grid-cols-[64px_minmax(0,1fr)]"
+          ? "grid-cols-[92px_minmax(0,1fr)_88px]"
+          : "grid-cols-[64px_minmax(0,1fr)_88px]"
       }`}
     >
       <button
@@ -148,56 +148,62 @@ export function PopularRankRow({
         className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
       />
 
-      {showRank ? <RankBadge index={index} /> : null}
+      <div className="relative z-10 flex items-start gap-2 md:contents">
+        {showRank ? <RankBadge index={index} /> : null}
 
-      <div
-        className={`relative z-10 flex h-[52px] w-[64px] shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-[90px] md:w-[246px] md:rounded-none ${
-          isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
-        }`}
-      >
-        {cover ? (
-          <img
-            src={cover}
-            alt=""
-            loading="lazy"
-            decoding="async"
-            className="h-full w-full object-cover"
-            onError={() => setCoverFailed(true)}
-          />
-        ) : (
-          <FallbackCover type={r.type} />
-        )}
-      </div>
-
-      <div
-        className={`pointer-events-none relative z-10 row-start-1 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4 ${
-          showRank ? "col-start-3" : "col-start-2"
-        }`}
-      >
-        <div className="break-words text-sm font-bold leading-snug text-white md:line-clamp-2 md:text-base md:font-semibold md:leading-[23px]">
-          {r.title}
-        </div>
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-[#9b9ca6] md:flex-nowrap md:gap-3 md:text-[#9FA0A8]">
-          <span className="shrink-0 rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
-            {resourceTypeLabel(t, r.type)}
-          </span>
-          <span className="min-w-0 break-words">
-            {cleanCategoryDisplayName(r.categoryName)}
-          </span>
-          <span className="text-[#55565e]">·</span>
-          <time dateTime={post.publishedAt} className="shrink-0 text-ark-muted">
+        <div className="flex w-[64px] shrink-0 flex-col items-center gap-1 md:block md:h-[90px] md:w-[246px]">
+          <div
+            className={`flex h-[52px] w-[64px] items-center justify-center overflow-hidden rounded-lg bg-[#111116] md:h-full md:w-full md:rounded-none ${
+              isTop3 ? "ring-1 ring-ark-gold/45 md:ring-0" : ""
+            }`}
+          >
+            {cover ? (
+              <img
+                src={cover}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+                onError={() => setCoverFailed(true)}
+              />
+            ) : (
+              <FallbackCover type={r.type} />
+            )}
+          </div>
+          <time
+            dateTime={post.publishedAt}
+            className="whitespace-nowrap text-[10px] leading-4 text-ark-muted md:hidden"
+          >
             {formatDateYmd(post.publishedAt)}
           </time>
         </div>
       </div>
 
-      <div
-        className={`relative z-10 row-start-2 ml-auto flex shrink-0 items-center gap-2 md:ml-0 md:pr-6 ${
-          showRank ? "col-start-3" : "col-start-2"
-        }`}
-      >
+      <div className="pointer-events-none relative z-10 col-start-2 flex min-w-0 flex-1 flex-col gap-1 md:col-auto md:gap-3 md:pl-6 md:pr-4">
+        <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
+          {r.title}
+        </div>
+        <div className="flex items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]">
+          <span className="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
+            {resourceTypeLabel(t, r.type)}
+          </span>
+          <span className="truncate">
+            {cleanCategoryDisplayName(r.categoryName)}
+          </span>
+          <span className="hidden text-[#55565e] md:inline">·</span>
+          <time
+            dateTime={post.publishedAt}
+            className="hidden shrink-0 text-ark-muted md:inline"
+          >
+            {formatDateYmd(post.publishedAt)}
+          </time>
+        </div>
+      </div>
+
+      <div className="relative z-10 col-start-3 flex shrink-0 items-center justify-end gap-2 md:col-auto md:pr-6">
         <FavoriteButton
           resourceId={r.id}
+          size="sm"
           onFavoriteChange={(favorited) =>
             onFavoriteChange?.(post.id, favorited)
           }
@@ -209,15 +215,15 @@ export function PopularRankRow({
             disabled={isDownloading}
             aria-label={t("download")}
             title={t("download")}
-            className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
+            className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
           >
             {isDownloading ? (
               <LoaderCircle
-                className="h-5 w-5 animate-spin"
+                className="h-4 w-4 animate-spin"
                 strokeWidth={2.3}
               />
             ) : (
-              <DownloadCloudIcon className="h-6 w-6" />
+              <DownloadCloudIcon className="h-5 w-5" />
             )}
           </button>
         ) : null}