From e00c1460e187250d92f05b35cc243c0826bf6031 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 18 May 2026 12:39:20 +0300
Subject: [PATCH] refactor: responsive spacing on CardHeader and CardFooter

---
 src/shared/ui/Card/ui/Card.test.tsx | 4 ++--
 src/shared/ui/Card/ui/Card.tsx      | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/shared/ui/Card/ui/Card.test.tsx b/src/shared/ui/Card/ui/Card.test.tsx
index a0ffcc5..2193f8a 100644
--- a/src/shared/ui/Card/ui/Card.test.tsx
+++ b/src/shared/ui/Card/ui/Card.test.tsx
@@ -42,7 +42,7 @@ describe('Card', () => {
 describe('CardHeader', () => {
   it('renders children with bottom margin', () => {
     render(<CardHeader>Header</CardHeader>);
-    expect(screen.getByText('Header')).toHaveClass('mb-4');
+    expect(screen.getByText('Header')).toHaveClass('mb-6');
   });
 });
 describe('CardTitle', () => {
@@ -69,6 +69,6 @@ describe('CardFooter', () => {
   it('renders children with top border', () => {
     render(<CardFooter>Footer</CardFooter>);
     const el = screen.getByText('Footer');
-    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6');
+    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6', 'md:mt-8', 'md:pt-8');
   });
 });
diff --git a/src/shared/ui/Card/ui/Card.tsx b/src/shared/ui/Card/ui/Card.tsx
index f98b940..2f8a222 100644
--- a/src/shared/ui/Card/ui/Card.tsx
+++ b/src/shared/ui/Card/ui/Card.tsx
@@ -55,7 +55,7 @@ interface SlotProps {
  * Card header wrapper — adds bottom margin.
  */
 export function CardHeader({ children, className }: SlotProps) {
-  return <div className={cn('mb-4', className)}>{children}</div>;
+  return <div className={cn('mb-6 md:mb-8', className)}>{children}</div>;
 }
 
 /**
@@ -83,5 +83,5 @@ export function CardContent({ children, className }: SlotProps) {
  * Card footer — separated by a brutal border-top.
  */
 export function CardFooter({ children, className }: SlotProps) {
-  return <div className={cn('mt-6 pt-6 brutal-border-top', className)}>{children}</div>;
+  return <div className={cn('mt-6 md:mt-8 pt-6 md:pt-8 brutal-border-top', className)}>{children}</div>;
 }