[#121] add design style for mobile search

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<LPE.Post.Document>
@@ -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;
+  }
 `

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<LPE.Post.Document>[]
@@ -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``