diff --git a/app/javascript/components/Board/PostList.tsx b/app/javascript/components/Board/PostList.tsx index 0be18cbd..c6b3eba3 100644 --- a/app/javascript/components/Board/PostList.tsx +++ b/app/javascript/components/Board/PostList.tsx @@ -25,7 +25,7 @@ const PostList = ({ posts, areLoading, error, handleLoadMore, page, hasMore }: P loadMore={handleLoadMore} threshold={50} hasMore={hasMore} - loader={} + loader={} useWindow={true} > {posts.map((post, i) => ( diff --git a/app/javascript/stylesheets/components/Board.scss b/app/javascript/stylesheets/components/Board.scss index 3c17d95e..6b6b7168 100644 --- a/app/javascript/stylesheets/components/Board.scss +++ b/app/javascript/stylesheets/components/Board.scss @@ -1,3 +1,38 @@ +@media (max-width: 800px) { + .boardContainer { + flex-direction: column; + + .sidebar { + position: relative; + width: 100%; + top: 0; + + .sidebar-box { + width: 100%; + } + } + + .box { + width: 100%; + } + } +} + +@media (min-width: 801px) { + .boardContainer { + flex-direction: row; + + .sidebar { + position: sticky; + top: 20px; + + .sidebar-box { + width: 250px; + } + } + } +} + .boardContainer { display: flex; flex: 1 1 auto; @@ -5,15 +40,11 @@ align-items: flex-start; flex-wrap: nowrap; + .sidebar { - top: 20px; - position: sticky; - .sidebar-box { flex: 0 0 auto; - width: 250px; - display: flex; flex-direction: column; justify-content: flex-start; @@ -116,6 +147,7 @@ flex: 1 1 auto; .postLink { + display: block; text-decoration: none; border-radius: 4px; margin: 8px 0;