From ad3870bf141fdbaf19bb93252617ba0d978669e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mat=C3=BA=C5=A1=20Hlav=C3=A1=C4=8Dik?=
 <hlavacik.matus@gmail.com>
Date: Fri, 22 Nov 2024 12:35:49 +0100
Subject: [PATCH] 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 <rtrembecky@gmail.com>
---
 src/components/Posts/Post.tsx  | 4 ++--
 src/components/Posts/Posts.tsx | 8 ++++----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Posts/Post.tsx b/src/components/Posts/Post.tsx
index 9db10a2f..0141baba 100644
--- 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
index 7302c3a6..c98118c8 100644
--- 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>