From 4c01e4fa527d14cdfc8bea21d834390a24643ecd Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 23:28:06 +0800
Subject: [PATCH] fix: unify mobile homepage section spacing to 10px

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>
---
 src/pages/Home/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index f6a263b..fc44514 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -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>