From c6614f544f4abcf5b5a24e342e832256e3e871e1 Mon Sep 17 00:00:00 2001
From: amirhouieh <amir@status.im>
Date: Mon, 28 Aug 2023 18:42:12 +0200
Subject: [PATCH] [#121] add design style for mobile search

---
 src/components/Search/SearchResult.TopPost.tsx | 5 +++++
 src/containers/Search/ListView.tsx             | 7 +++++++
 2 files changed, 12 insertions(+)

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<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;
+  }
 `
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<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``