Position PostDetail properly

src/components/Posts/Post.tsx

@@ -1,12 +1,12 @@
-import {Stack, Typography} from '@mui/material'
+import {Grid, Stack, Typography} from '@mui/material'
 import {FC} from 'react'
 
 import {formatDate} from '@/utils/formatDate'
 import {useSeminarInfo} from '@/utils/useSeminarInfo'
 
 import {Button} from '../Clickable/Button'
 import {Link} from '../Clickable/Link'
-import {PostMarkdown} from './PostMarkdown'
+import {PostDetail} from './PostDetail'
 
 export interface IPost {
   id: number
@@ -18,17 +18,16 @@ export interface IPost {
   visible_after: string
   visible_until: string
   sites: number[]
-  isDetailOpen: boolean
   openDetail: () => void
 }
 
-export const Post: FC<IPost> = ({caption, short_text, links, details, sites, added_at, isDetailOpen, openDetail}) => {
+export const Post: FC<IPost> = ({caption, short_text, links, details, sites, added_at, openDetail}) => {
   const {seminarId} = useSeminarInfo()
 
   if (!sites.includes(seminarId)) return null
 
   return (
-    <Stack sx={{position: 'relative'}}>
+    <Stack>
       <Typography variant="postTitle">{caption}</Typography>
 
       <Typography variant="postBody">{short_text}</Typography>
@@ -51,24 +50,6 @@ export const Post: FC<IPost> = ({caption, short_text, links, details, sites, add
           {formatDate(added_at)}
         </Typography>
       </Stack>
-
-      {isDetailOpen && (
-        <Stack
-          p={2}
-          sx={{
-            position: 'absolute',
-            left: '25vw',
-            width: '30vw',
-            border: '1rem solid black',
-            backgroundColor: 'white',
-          }}
-        >
-          <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic" mb={4}>
-            {caption}
-          </Typography>
-          <PostMarkdown content={details} />
-        </Stack>
-      )}
     </Stack>
   )
 }

src/components/Posts/PostDetail.tsx

@@ -0,0 +1,28 @@
+import {Stack, Typography} from '@mui/material'
+import {FC} from 'react'
+
+import {PostMarkdown} from './PostMarkdown'
+
+export interface IPost {
+  caption: string
+  details: string
+}
+
+export const PostDetail: FC<IPost> = ({caption, details}) => {
+  return (
+    <Stack
+      p={2}
+      sx={{
+        border: '1rem solid black',
+        backgroundColor: 'white',
+        maxHeight: '60vh',
+        overflow: 'scroll',
+      }}
+    >
+      <Typography variant="postTitle" textTransform="uppercase" fontStyle="italic" mb={4}>
+        {caption}
+      </Typography>
+      <PostMarkdown content={details} />
+    </Stack>
+  )
+}

src/components/Posts/Posts.tsx

@@ -1,10 +1,11 @@
-import {Stack, Typography} from '@mui/material'
+import {Grid, Stack, Typography} from '@mui/material'
 import {useQuery} from '@tanstack/react-query'
 import axios from 'axios'
-import {FC, useState} from 'react'
+import {FC, Fragment, useRef, useState} from 'react'
 
 import {Loading} from '../Loading/Loading'
 import {IPost, Post} from './Post'
+import {PostDetail} from './PostDetail'
 
 export const Posts: FC = () => {
   const {
@@ -17,22 +18,39 @@ export const Posts: FC = () => {
   })
   const posts = postsData?.data ?? []
 
-  const [activePostDetailId, setActivePostDetailId] = useState<number | null>(null)
+  const [activePostDetailIndex, setActivePostDetailIndex] = useState<number | undefined>(undefined)
 
   if (postsIsLoading) return <Loading />
 
   if (postsError) return <Typography>{postsError.message}</Typography>
 
   return (
-    <Stack gap={5} mb={10}>
-      {posts.map((post) => (
-        <Post
-          key={post.id}
-          {...post}
-          isDetailOpen={post.id === activePostDetailId}
-          openDetail={() => setActivePostDetailId(post.id)}
-        />
-      ))}
-    </Stack>
+    <>
+      {activePostDetailIndex !== 0 && (
+        <Grid display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={5} mb={5}>
+          <Stack gap={5} gridColumn="span 4">
+            {posts.slice(0, activePostDetailIndex).map((post, index) => (
+              <Post key={post.id} {...post} openDetail={() => setActivePostDetailIndex(index)} />
+            ))}
+          </Stack>
+        </Grid>
+      )}
+      {activePostDetailIndex !== undefined && (
+        <Grid display="grid" gridTemplateColumns="repeat(12, 1fr)" gap={5}>
+          <Stack gap={5} gridColumn="span 4">
+            {posts.slice(activePostDetailIndex).map((post, index) => (
+              <Post
+                key={post.id}
+                {...post}
+                openDetail={() => setActivePostDetailIndex(activePostDetailIndex + index)}
+              />
+            ))}
+          </Stack>
+          <Stack gridColumn="span 5">
+            <PostDetail caption={posts[activePostDetailIndex].caption} details={posts[activePostDetailIndex].details} />
+          </Stack>
+        </Grid>
+      )}
+    </>
   )
 }

src/pages/strom/index.tsx

@@ -4,7 +4,7 @@ import {PageLayout} from '@/components/PageLayout/PageLayout'
 import {Posts} from '@/components/Posts/Posts'
 
 const Strom: NextPage = () => (
-  <PageLayout title="Novinky" contentWidth={1}>
+  <PageLayout title="Novinky" contentWidth={3}>
     <Posts />
   </PageLayout>
 )