src/components/PopularRankList.tsx

@@ -88,12 +88,14 @@ export function PopularRankRow({
   index,
   categories,
   browseSort = "popular",
+  showRank = true,
   onFavoriteChange,
 }: {
   post: Post;
   index: number;
   categories: Category[];
   browseSort?: string;
+  showRank?: boolean;
   onFavoriteChange?: (postId: string, favorited: boolean) => void;
 }) {
   const { t, lang } = useI18n();
@@ -106,7 +108,7 @@ export function PopularRankRow({
 
   const r = postToResource(post, lang, categories);
   const cover = r.coverImage && !coverFailed ? assetUrl(r.coverImage) : "";
-  const isTop3 = index < MEDALS.length;
+  const isTop3 = showRank && index < MEDALS.length;
 
   const handleDownload = async () => {
     if (isDownloading || !r.downloadPostId || !r.downloadAttachmentId) return;
@@ -127,7 +129,13 @@ export function PopularRankRow({
   };
 
   return (
-    <article className="relative flex items-center gap-3 overflow-hidden rounded-2xl bg-[#272632] p-3 transition hover:ring-1 hover:ring-ark-gold/55 md:h-[90px] md:gap-0 md:p-0">
+    <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 ${
+        showRank
+          ? "grid-cols-[28px_64px_minmax(0,1fr)]"
+          : "grid-cols-[64px_minmax(0,1fr)]"
+      }`}
+    >
       <button
         type="button"
         onClick={() => {
@@ -140,7 +148,7 @@ export function PopularRankRow({
         className="absolute inset-0 z-0 rounded-2xl outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/70"
       />
 
-      <RankBadge index={index} />
+      {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 ${
@@ -161,15 +169,19 @@ export function PopularRankRow({
         )}
       </div>
 
-      <div className="pointer-events-none relative z-10 flex min-w-0 flex-1 flex-col gap-1 md:gap-3 md:pl-6 md:pr-4">
+      <div
-        <div className="line-clamp-2 text-sm font-bold leading-snug text-white md:text-base md:font-semibold md:leading-[23px]">
+        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 items-center gap-2 text-xs text-[#9b9ca6] md:gap-3 md:text-[#9FA0A8]">
+        <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="rounded-full bg-[#2a2b33] px-2 py-0.5 text-[#b9bac3] md:px-3 md:py-1">
+          <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="truncate">
+          <span className="min-w-0 break-words">
             {cleanCategoryDisplayName(r.categoryName)}
           </span>
           <span className="text-[#55565e]">·</span>
@@ -179,7 +191,11 @@ export function PopularRankRow({
         </div>
       </div>
 
-      <div className="relative z-10 flex shrink-0 items-center gap-2 pr-4 md:pr-6">
+      <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"
+        }`}
+      >
         <FavoriteButton
           resourceId={r.id}
           onFavoriteChange={(favorited) =>

src/pages/Favorites/index.tsx

@@ -168,6 +168,7 @@ export default function Favorites() {
               index={index}
               categories={categories}
               browseSort=""
+              showRank={false}
               onFavoriteChange={(_, favorited) => {
                 if (!favorited) setReloadKey((value) => value + 1);
               }}