From 320e09cc87e03da0f182ea645998cf195c514005 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 02:04:26 +0800
Subject: [PATCH] fix: desktop homepage responsive polish and nav tweaks

- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
  so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
  Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
  DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
  across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
  the end instead of always showing both.

All changes are md/lg/xl-scoped; mobile layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/FigmaBanner.tsx     |  2 +-
 src/components/PopularRankList.tsx | 10 ++---
 src/components/RecommendedCard.tsx |  2 +-
 src/layouts/PublicLayout.tsx       | 32 ++++++++--------
 src/pages/Home/index.tsx           | 59 ++++++++++++++++--------------
 5 files changed, 55 insertions(+), 50 deletions(-)

diff --git a/src/components/FigmaBanner.tsx b/src/components/FigmaBanner.tsx
index bc044ba..f0925a1 100644
--- a/src/components/FigmaBanner.tsx
+++ b/src/components/FigmaBanner.tsx
@@ -301,7 +301,7 @@ export function FigmaBanner() {
   ) : null;
 
   return (
-    <div className="relative">
+    <div className="relative md:mx-auto md:max-w-[680px] lg:max-w-[800px]">
       <div
         ref={scrollerRef}
         onPointerDown={handlePointerDown}
diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index b86cdb1..eada1ca 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -1,6 +1,5 @@
 import {
   Archive,
-  Download,
   File,
   FileText,
   Image as ImageIcon,
@@ -11,6 +10,7 @@ import {
   Video,
   type LucideIcon,
 } from "lucide-react";
+import { DownloadCloudIcon } from "./icons/DownloadCloudIcon";
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { assetUrl, type Category } from "../api";
@@ -173,12 +173,12 @@ function PopularRankRow({
             disabled={isDownloading}
             aria-label={t("download")}
             title={t("download")}
-            className="flex h-9 w-9 items-center justify-center rounded-lg text-neutral-300 outline-none transition hover:bg-white/5 hover:text-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:opacity-60"
+            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"
           >
             {isDownloading ? (
-              <LoaderCircle className="h-[18px] w-[18px] animate-spin" />
+              <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.3} />
             ) : (
-              <Download className="h-[18px] w-[18px]" />
+              <DownloadCloudIcon className="h-6 w-6" />
             )}
           </button>
         ) : null}
@@ -224,7 +224,7 @@ export function PopularRankList({
   const placeholderCount = Math.max(0, MAX_ITEMS - items.length);
 
   return (
-    <div className="mx-auto flex max-w-[760px] flex-col gap-2.5 px-4 md:gap-3 md:px-0">
+    <div className="mx-auto flex max-w-full flex-col gap-2.5 px-4 md:max-w-[820px] md:gap-3 md:px-0 lg:max-w-[1080px] xl:max-w-[1180px]">
       {items.map((post, index) => (
         <PopularRankRow
           key={post.id}
diff --git a/src/components/RecommendedCard.tsx b/src/components/RecommendedCard.tsx
index ce8a857..f2a7d6e 100644
--- a/src/components/RecommendedCard.tsx
+++ b/src/components/RecommendedCard.tsx
@@ -28,7 +28,7 @@ const CARD_HOVER_SPRING = {
 } as const;
 
 const CARD_CAROUSEL_SIZE_CLASS =
-  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:max-xl:w-[273px] xl:w-[246.4px]";
+  "w-[208px] md:w-[240px] lg:w-[246.4px] min-[1100px]:w-[273px]";
 
 const CARD_GRID_SIZE_CLASS = "w-full max-w-[360px] md:max-w-none";
 
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 9740a50..09102e7 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -529,7 +529,7 @@ export function PublicLayout() {
             </div>
 
             <nav
-              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
+              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-0.5 min-[1200px]:flex lg:gap-5"
               aria-label={t("mainNav")}
             >
               <Link
@@ -560,13 +560,6 @@ export function PublicLayout() {
               >
                 {t("latest")}
               </Link>
-              <Link
-                to={popularHref}
-                className={navClassName(na("browsePopular"))}
-                aria-current={na("browsePopular") ? "page" : undefined}
-              >
-                {t("popular")}
-              </Link>
               <Link
                 to="/favorites"
                 className={navClassName(na("favorites"))}
@@ -574,6 +567,13 @@ export function PublicLayout() {
               >
                 {t("favorites")}
               </Link>
+              <Link
+                to={popularHref}
+                className={navClassName(na("browsePopular"))}
+                aria-current={na("browsePopular") ? "page" : undefined}
+              >
+                {t("popular")}
+              </Link>
             </nav>
 
             <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
@@ -667,14 +667,6 @@ export function PublicLayout() {
             >
               {t("latest")}
             </Link>
-            <Link
-              to={popularHref}
-              className={mobileMenuNavClassName(na("browsePopular"))}
-              aria-current={na("browsePopular") ? "page" : undefined}
-              onClick={() => setOpen(false)}
-            >
-              {t("popular")}
-            </Link>
             <Link
               to="/favorites"
               className={mobileMenuNavClassName(na("favorites"))}
@@ -683,6 +675,14 @@ export function PublicLayout() {
             >
               {t("favorites")}
             </Link>
+            <Link
+              to={popularHref}
+              className={mobileMenuNavClassName(na("browsePopular"))}
+              aria-current={na("browsePopular") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("popular")}
+            </Link>
           </div>
         ) : null}
       </header>
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index fc44514..97488cc 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -221,6 +221,9 @@ export function Home() {
           Math.round(recScroll.progress * (recommendedDotCount - 1)),
         )
       : 0;
+  // Hide the arrow that points to an edge we're already at.
+  const recAtStart = recScroll.progress <= 0.01;
+  const recAtEnd = recScroll.progress >= 0.99;
 
   if (err) {
     return (
@@ -333,14 +336,15 @@ export function Home() {
 
       <Reveal>
         <section id="official" className="scroll-mt-16 md:scroll-mt-24">
-          <div className="px-4 md:px-0">
-            <SectionHeader
-              title={t("officialSection")}
-              viewAllTo="/official-recommendations"
-              viewAllLabel={t("viewAll")}
-            />
-          </div>
-          <div className="relative">
+          <div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
+            <div className="px-4 md:px-0">
+              <SectionHeader
+                title={t("officialSection")}
+                viewAllTo="/official-recommendations"
+                viewAllLabel={t("viewAll")}
+              />
+            </div>
+            <div className="relative">
             <div
               ref={recRowRef}
               className="mt-2.5 flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
@@ -386,26 +390,27 @@ export function Home() {
                 />
               ))}
             </div>
-            {canScrollRec ? (
-              <>
-                <button
-                  type="button"
-                  onClick={() => scrollRec(-1)}
-                  className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                  aria-label="Previous recommendations"
-                >
-                  <ChevronLeft className="h-5 w-5" />
-                </button>
-                <button
-                  type="button"
-                  onClick={() => scrollRec(1)}
-                  className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                  aria-label="Next recommendations"
-                >
-                  <ChevronRight className="h-5 w-5" />
-                </button>
-              </>
+            {canScrollRec && !recAtStart ? (
+              <button
+                type="button"
+                onClick={() => scrollRec(-1)}
+                className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                aria-label="Previous recommendations"
+              >
+                <ChevronLeft className="h-5 w-5" />
+              </button>
             ) : null}
+            {canScrollRec && !recAtEnd ? (
+              <button
+                type="button"
+                onClick={() => scrollRec(1)}
+                className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                aria-label="Next recommendations"
+              >
+                <ChevronRight className="h-5 w-5" />
+              </button>
+            ) : null}
+            </div>
           </div>
         </section>
       </Reveal>