From 7f6e6369fff984f43d633655042c965b53bcd12a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 19 May 2026 18:06:51 +0300
Subject: [PATCH] fix: reduce padding and spacing for mobile

Main: px-4 py-6 on mobile (was px-8 py-12). Section accordion:
mb/py on inactive links tightened to 1/1 on mobile, space-y-0
between sections. Active title text-xl on mobile to prevent
wrapping at ~400px, matches inactive title size.
---
 app/[[...slug]]/page.tsx                               |  2 +-
 .../Section/ui/SectionAccordion/SectionAccordion.tsx   | 10 +++++-----
 .../ui/SectionsAccordion/SectionsAccordion.tsx         |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/[[...slug]]/page.tsx b/app/[[...slug]]/page.tsx
index 00450ec..6cc7a73 100644
--- a/app/[[...slug]]/page.tsx
+++ b/app/[[...slug]]/page.tsx
@@ -41,7 +41,7 @@ export default async function SectionPage({ params }: Props) {
   }
 
   return (
-    <main className="px-8 py-12 lg:py-16 lg:px-16">
+    <main className="px-4 py-6 sm:px-8 sm:py-12 lg:py-16 lg:px-16">
       <SectionsAccordion sections={sections} activeSlug={activeSlug}>
         {sections.map((s) => (
           <SectionFactory key={s.slug} slug={s.slug} />
diff --git a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
index 12eee10..8acdfd3 100644
--- a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
+++ b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
@@ -38,10 +38,10 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
   return (
     <section id={id} className="scroll-mt-8">
       {isActive ? (
-        <div className="mb-12">
+        <div className="mb-6 sm:mb-12">
           <ViewTransitionWrapper name="section-content">
-            <div className="mb-16">
-              <h1 className="font-heading font-black text-section-title leading-[1.2] mb-0">{heading}</h1>
+            <div className="mb-6 sm:mb-16">
+              <h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
             </div>
           </ViewTransitionWrapper>
           <ViewTransitionWrapper name="section-body">
@@ -52,9 +52,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
         <Link
           href={href}
           aria-label={heading}
-          className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0"
+          className="block w-full text-left mb-1 py-1 sm:mb-3 sm:py-3 group border-b-0 hover:border-b-0"
         >
-          <span className="block font-heading font-wonk font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
+          <span className="block font-heading font-wonk font-black text-xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
             {heading}
           </span>
         </Link>
diff --git a/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx b/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
index c195e02..6e8f74b 100644
--- a/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
+++ b/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
@@ -28,7 +28,7 @@ export function SectionsAccordion({ sections, activeSlug, children }: Props) {
   const slots = Children.toArray(children);
 
   return (
-    <div className="space-y-2">
+    <div className="space-y-0 sm:space-y-2">
       {sections.map((section, i) => (
         <SectionAccordion
           key={section.slug}