#23

frontend/src/pages/posts/PostDetailPage.tsx

@@ -24,8 +24,8 @@ type Props = { user: User | null }
 export default ({ user }: Props) => {
   const { id } = useParams ()
 
-  const [post, setPost] = useState<Post | null> (null)
   const [editing, setEditing] = useState (true)
+  const [post, setPost] = useState<Post | null> (null)
   const [status, setStatus] = useState (200)
 
   const changeViewedFlg = async () => {
@@ -92,13 +92,15 @@ export default ({ user }: Props) => {
 		       : 'bg-gray-500 hover:bg-gray-600')
 
   return (
-      <>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  {(post?.thumbnail || post?.thumbnailBase) && (
 	      <meta name="thumbnail" content={post.thumbnail || post.thumbnailBase} />)}
 	  {post && <title>{`${ post.title || post.url } | ${ SITE_TITLE }`}</title>}
 	</Helmet>
-	<TagDetailSidebar post={post} />
+	<div className="hidden md:block">
+	  <TagDetailSidebar post={post} />
+	</div>
 	<MainArea>
 	  {post
 	   ? (
@@ -126,5 +128,8 @@ export default ({ user }: Props) => {
 	      </>)
 	   : 'Loading...'}
 	</MainArea>
-      </>)
+	<div className="md:hidden">
+	  <TagDetailSidebar post={post} />
+	</div>
+      </div>)
 }

frontend/src/pages/posts/PostListPage.tsx

@@ -77,7 +77,7 @@ export default () => {
   }, [location.search])
 
   return (
-      <>
+      <div className="md:flex md:flex-1">
 	<Helmet>
 	  <title>
 	    {tags.length
@@ -85,13 +85,15 @@ export default () => {
 	     : `${ SITE_TITLE }　〜 ぼざろクリーチャーシリーズ綜合リンク集サイト`}
 	  </title>
 	</Helmet>
-	<TagSidebar posts={posts.slice (0, 20)} />
+	<div className="hidden md:block">
+	  <TagSidebar posts={posts.slice (0, 20)} />
+	</div>
 	<MainArea>
 	  <TabGroup>
 	    <Tab name="広場">
 	      {posts.length
 	       ? (
-		  <div className="flex flex-wrap gap-4 p-4">
+		  <div className="flex flex-wrap gap-4 gap-y-8 p-4 justify-between">
 		  {posts.map (post => (
 		      <Link to={`/posts/${ post.id }`}
 			    key={post.id}
@@ -115,5 +117,8 @@ export default () => {
 		</Tab>)}
 	  </TabGroup>
 	</MainArea>
-      </>)
+	<div className="md:hidden">
+	  <TagSidebar posts={posts.slice (0, 20)} />
+	</div>
+      </div>)
 }