diff --git a/src/components/Search/SearchResult.TopPost.tsx b/src/components/Search/SearchResult.TopPost.tsx index d1eff42..332c99d 100644 --- a/src/components/Search/SearchResult.TopPost.tsx +++ b/src/components/Search/SearchResult.TopPost.tsx @@ -3,6 +3,7 @@ import styled from '@emotion/styled' import { PostCard } from '@/components/PostCard' import { SearchResultTopPostBlocks } from '@/components/Search/SearchResult.TopPost.Blocks' import { Typography } from '@acid-info/lsd-react' +import { lsdUtils } from '@/utils/lsd.utils' interface Props { post: LPE.Search.ResultItemBase @@ -29,4 +30,8 @@ export const SearchResultTopPost = ({ post, shows, blocks }: Props) => { const Container = styled.div` padding: 24px 0; + + ${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} { + padding: 0; + } ` diff --git a/src/containers/Search/ListView.tsx b/src/containers/Search/ListView.tsx index 0d41ffa..c650dde 100644 --- a/src/containers/Search/ListView.tsx +++ b/src/containers/Search/ListView.tsx @@ -8,6 +8,7 @@ import { useMemo } from 'react' import { SearchResultTopPost } from '@/components/Search/SearchResult.TopPost' import { SearchResultListBlocks } from '@/components/Search/SearchResult.Blocks' import { Typography } from '@acid-info/lsd-react' +import { lsdUtils } from '@/utils/lsd.utils' interface Props { posts: LPE.Search.ResultItemBase[] @@ -126,12 +127,18 @@ export const SearchResultsListView = (props: Props) => { const Container = styled(Grid)` padding-top: 56px; + ${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} { + padding-top: 32px; + } ` const PostsList = styled(GridItem)` display: flex; flex-direction: column; gap: 56px; + ${({ theme }) => lsdUtils.breakpoint(theme, 'xs', 'exact')} { + gap: 32px; + } ` const PostsListHeader = styled.div`` const PostsListContent = styled.div``