From 5b93e8dc77089f54de0567968e3a262ee2dca473 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 02:39:54 +0800
Subject: [PATCH] fix: match banner and popular list width to the latest cards

Size the banner and the popular rank list to the same responsive widths as
the latest section's message bubbles (680/900/1120), so the banner, latest
cards and popular cards line up at one consistent content width on desktop.

Desktop-scoped; mobile stays full-width.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/FigmaBanner.tsx     | 2 +-
 src/components/PopularRankList.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FigmaBanner.tsx b/src/components/FigmaBanner.tsx
index f0925a1..f32e491 100644
--- a/src/components/FigmaBanner.tsx
+++ b/src/components/FigmaBanner.tsx
@@ -301,7 +301,7 @@ export function FigmaBanner() {
   ) : null;
 
   return (
-    <div className="relative md:mx-auto md:max-w-[680px] lg:max-w-[800px]">
+    <div className="relative md:mx-auto md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]">
       <div
         ref={scrollerRef}
         onPointerDown={handlePointerDown}
diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index eada1ca..7dd074b 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -224,7 +224,7 @@ export function PopularRankList({
   const placeholderCount = Math.max(0, MAX_ITEMS - items.length);
 
   return (
-    <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]">
+    <div className="mx-auto flex max-w-full flex-col gap-2.5 px-4 md:max-w-[680px] md:gap-3 md:px-0 lg:max-w-[900px] xl:max-w-[1120px]">
       {items.map((post, index) => (
         <PopularRankRow
           key={post.id}