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;