diff --git a/app/features/feed/pages/feedPage.module.scss b/app/features/feed/pages/feedPage.module.scss index b4b78da..9a1dfb5 100644 --- a/app/features/feed/pages/feedPage.module.scss +++ b/app/features/feed/pages/feedPage.module.scss @@ -1,11 +1,22 @@ @use 'styles/layout' as *; +.searchBarContainer { + position: sticky; + top: 0; + z-index: 20; + padding: 0 24px; + + @include mobile { + padding: 0; + } +} .feed { display: flex; + flex-direction: column; justify-content: center; - padding: 24px; + padding: 0 24px; @include mobile { - padding: 16px; + padding: 0 16px; } } @@ -15,6 +26,7 @@ display: grid; gap: 20px; padding: 0; + margin: 0; } .card { @@ -22,7 +34,6 @@ border: 1px solid #eee; border-radius: 16px; overflow: hidden; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04); } .cover-link { diff --git a/app/features/feed/pages/feedPage.tsx b/app/features/feed/pages/feedPage.tsx index 450ce28..01bf838 100644 --- a/app/features/feed/pages/feedPage.tsx +++ b/app/features/feed/pages/feedPage.tsx @@ -1,5 +1,7 @@ import { Link, useLoaderData } from '@remix-run/react'; +import { SearchBar } from 'app/components/SearchBar'; + import styles from './feedPage.module.scss'; import { feedLoader } from '../loader'; @@ -10,40 +12,45 @@ export default function feedPage() { const { feedList } = useLoaderData(); return ( -
- -
+ + ))} + + + ); } diff --git a/app/features/profile/pages/show.module.scss b/app/features/profile/pages/show.module.scss index ac7915c..c830200 100644 --- a/app/features/profile/pages/show.module.scss +++ b/app/features/profile/pages/show.module.scss @@ -1,7 +1,11 @@ @use 'styles/layout' as *; .root { - padding: 24px; + padding: 0 24px 24px; + + @include mobile { + padding: 0 0 16px; + } } .profile-box { display: flex;