fix: reduce Button sm padding on mobile

This commit is contained in:
Ilia Mashkov
2026-05-19 18:05:57 +03:00
parent 906ec3b805
commit 954b17d824
3 changed files with 4 additions and 4 deletions
@@ -98,7 +98,7 @@ describe('ProjectCard', () => {
it('View Project button uses sm size', () => { it('View Project button uses sm size', () => {
render(<ProjectCard {...DEFAULT_PROPS} />); render(<ProjectCard {...DEFAULT_PROPS} />);
const btn = screen.getByRole('link', { name: /view project/i }); const btn = screen.getByRole('link', { name: /view project/i });
expect(btn).toHaveClass('px-4', 'py-2', 'text-sm'); expect(btn).toHaveClass('px-3', 'py-1.5', 'sm:px-4', 'sm:py-2', 'text-sm');
}); });
it('tags are xs outline badges', () => { it('tags are xs outline badges', () => {
+2 -2
View File
@@ -38,7 +38,7 @@ describe('Button', () => {
}); });
it('applies sm size', () => { it('applies sm size', () => {
render(<Button size="sm">Go</Button>); render(<Button size="sm">Go</Button>);
expect(screen.getByRole('button')).toHaveClass('px-4', 'py-2'); expect(screen.getByRole('button')).toHaveClass('px-3', 'py-1.5', 'sm:px-4', 'sm:py-2');
}); });
it('applies lg size', () => { it('applies lg size', () => {
render(<Button size="lg">Go</Button>); render(<Button size="lg">Go</Button>);
@@ -87,7 +87,7 @@ describe('Button', () => {
</Button>, </Button>,
); );
const link = screen.getByRole('link'); const link = screen.getByRole('link');
expect(link).toHaveClass('bg-blue', 'px-4', 'py-2'); expect(link).toHaveClass('bg-blue', 'px-3', 'py-1.5', 'sm:px-4', 'sm:py-2');
}); });
}); });
}); });
+1 -1
View File
@@ -52,7 +52,7 @@ const VARIANTS = {
} as const satisfies Record<ButtonVariant, string>; } as const satisfies Record<ButtonVariant, string>;
const SIZES = { const SIZES = {
sm: 'px-4 py-2 text-sm', sm: 'px-3 py-1.5 sm:px-4 sm:py-2 text-sm',
md: 'px-6 py-3 text-base', md: 'px-6 py-3 text-base',
lg: 'px-8 py-4 text-lg', lg: 'px-8 py-4 text-lg',
} as const satisfies Record<ButtonSize, string>; } as const satisfies Record<ButtonSize, string>;