terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: match banner and popular list width to the latest cards

Browse Source 
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>
This commit is contained in:
TerryM
2026-05-31 02:39:54 +08:00
parent a564fddfcb
commit 5b93e8dc77
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/FigmaBanner.tsx
View File

@@ -301,7 +301,7 @@ export function FigmaBanner() {
) : null; ) : null;
return ( 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 <div
ref={scrollerRef} ref={scrollerRef}
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}

2
src/components/PopularRankList.tsx
View File

@@ -224,7 +224,7 @@ export function PopularRankList({
const placeholderCount = Math.max(0, MAX_ITEMS - items.length); const placeholderCount = Math.max(0, MAX_ITEMS - items.length);
return ( 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) => ( {items.map((post, index) => (
<PopularRankRow <PopularRankRow
key={post.id} key={post.id}