Adjust posts page to mobile (#440)

* Adjust posts page to mobile * fix scrollbar on open post details * let post details take 6 columns on lg+ --------- Co-authored-by: rtrembecky <[email protected]>
ZdruzenieSTROM · Nov 22, 2024 · ad3870b · ad3870b
1 parent 7f5d229
commit ad3870b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
@@ -25,9 +25,9 @@ export const Post: FC<IPost> = ({caption, short_text, links, details, added_at,
 
     <Typography variant="postBody">{short_text}</Typography>
 
-    <Stack direction="row" justifyContent="space-between" gap={0.5}>
+    <Stack direction="row" justifyContent="space-between" gap={0.5} mt={0.5}>
       {/* alignItems so the links don't stretch */}
-      <Stack gap={0.5} alignItems="start">
+      <Stack gap={0.5} alignItems="start" ml="-10px">
         {details.length > 0 && (
           <Button type="button" onClick={openDetail} variant="button2">
             Podrobnosti

diff --git a/src/components/Posts/Posts.tsx b/src/components/Posts/Posts.tsx
@@ -37,7 +37,7 @@ export const Posts: FC = () => {
         - druhy grid su prispevky od rozbaleneho prispevku - dva grid itemy ako jeden stlpec prispevkov (`xs={4}`) a druhy stlpec ako detail prispevku (`xs={5}` - detail je sirsi) */}
       {activePostDetailIndex !== 0 && (
         <Grid container disableEqualOverflow columnSpacing={5} mb={5}>
-          <Grid xs={4}>
+          <Grid xs={12} sm={6} md={4}>
             <Stack gap={5}>
               {posts.slice(0, activePostDetailIndex).map((post, index) => {
                 if (!post.sites.includes(seminarId)) return null
@@ -48,8 +48,8 @@ export const Posts: FC = () => {
         </Grid>
       )}
       {activePostDetailIndex !== undefined && (
-        <Grid container columnSpacing={5}>
-          <Grid xs={4}>
+        <Grid container disableEqualOverflow columnSpacing={5}>
+          <Grid xs={12} sm={6} md={4}>
             <Stack gap={5}>
               {posts.slice(activePostDetailIndex).map((post, index) => {
                 if (!post.sites.includes(seminarId)) return null
@@ -63,7 +63,7 @@ export const Posts: FC = () => {
               })}
             </Stack>
           </Grid>
-          <Grid xs={5}>
+          <Grid xs={12} sm={6} mt={{xs: 2, sm: 0}}>
             <PostDetail caption={posts[activePostDetailIndex].caption} details={posts[activePostDetailIndex].details} />
           </Grid>
         </Grid>