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

fix: unify mobile homepage section spacing to 10px

Browse Source 
Mobile sections had no vertical rhythm (space-y only at md+) and
inconsistent header-to-content gaps. Add uniform 10px spacing between
sections and header-to-content so each section header sits symmetric.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 23:28:06 +08:00
parent ada117f4f4
commit 4c01e4fa52
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Home/index.tsx
View File

@@ -231,7 +231,7 @@ export function Home() {
}
return (
<div className="pb-4 md:space-y-10 md:pb-16 xl:space-y-[34px]">
<div className="space-y-2.5 pb-4 md:space-y-10 md:pb-16 xl:space-y-[34px]">
<section className="md:mt-0">
<FigmaBanner />
</section>
@@ -246,7 +246,7 @@ export function Home() {
/>
</div>
<div className="md:hidden">
<div className="mt-2.5 md:hidden">
<div
ref={categoryRowRef}
className="flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
@@ -343,7 +343,7 @@ export function Home() {
<div className="relative">
<div
ref={recRowRef}
className="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"
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"
>
{rec.map((r, index) => (
<div key={r.id}>
@@ -420,7 +420,7 @@ export function Home() {
viewAllLabel={t("viewAll")}
/>
</div>
<div className="mt-4 flex flex-col gap-3 md:mt-7">
<div className="mt-2.5 flex flex-col gap-3 md:mt-7">
{latestPosts.slice(0, 5).map((post, index) => (
<Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
<MessageBubble post={post} />
@@ -441,7 +441,7 @@ export function Home() {
viewAllLabel={t("viewAll")}
/>
</div>
<div className="mt-4 md:mt-7">
<div className="mt-2.5 md:mt-7">
<PopularRankList posts={popularPosts} categories={cats} />
</div>
</section>