From f107427398954d43eeadc465752c2dfc2e5e930e Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Tue, 31 May 2022 09:30:10 +0300
Subject: [PATCH] style: fix hackathons/feed grid

---
 .../pages/HackathonsPage/HackathonsPage.tsx   |  4 ++--
 .../pages/HackathonsPage/styles.module.scss   |  5 +++-
 .../Posts/pages/FeedPage/FeedPage.tsx         | 16 +++++++------
 .../Posts/pages/FeedPage/styles.module.scss   | 24 ++++++++++++++++---
 4 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
index 90c4a28..2cad2e3 100644
--- a/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
+++ b/src/features/Hackathons/pages/HackathonsPage/HackathonsPage.tsx
@@ -55,11 +55,11 @@ export default function HackathonsPage() {
                         </Button>
                     </div>
                 </aside>
-                <div className="self-start">
+                <main className="self-start">
                     <HackathonsList
                         isLoading={hackathonsQuery.loading}
                         items={hackathonsQuery.data?.getAllHackathons} />
-                </div>
+                </main>
             </div></>
     )
 }
diff --git a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss b/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
index 37b8c6f..576848a 100644
--- a/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
+++ b/src/features/Hackathons/pages/HackathonsPage/styles.module.scss
@@ -4,7 +4,10 @@
   gap: 24px;
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 3fr;
+    grid-template-columns: repeat(4, 1fr);
     gap: 24px;
+    > main {
+      grid-column: 2/5;
+    }
   }
 }
diff --git a/src/features/Posts/pages/FeedPage/FeedPage.tsx b/src/features/Posts/pages/FeedPage/FeedPage.tsx
index f8ba18c..8aa6875 100644
--- a/src/features/Posts/pages/FeedPage/FeedPage.tsx
+++ b/src/features/Posts/pages/FeedPage/FeedPage.tsx
@@ -57,13 +57,15 @@ export default function FeedPage() {
                         />
                     </div>
                 </aside>
-                <PostsList
-                    isLoading={feedQuery.loading}
-                    items={feedQuery.data?.getFeed}
-                    isFetching={isFetchingMore}
-                    onReachedBottom={fetchMore}
-                />
-                <aside className='no-scrollbar hidden md:block'>
+                <main>
+                    <PostsList
+                        isLoading={feedQuery.loading}
+                        items={feedQuery.data?.getFeed}
+                        isFetching={isFetchingMore}
+                        onReachedBottom={fetchMore}
+                    />
+                </main>
+                <aside className='no-scrollbar'>
                     <div className="sticky"
                         style={{
                             top: `${navHeight + 16}px`,
diff --git a/src/features/Posts/pages/FeedPage/styles.module.scss b/src/features/Posts/pages/FeedPage/styles.module.scss
index 97cb263..763140a 100644
--- a/src/features/Posts/pages/FeedPage/styles.module.scss
+++ b/src/features/Posts/pages/FeedPage/styles.module.scss
@@ -2,13 +2,31 @@
   display: grid;
   grid-template-columns: 100%;
   gap: 24px;
+  > aside:last-of-type {
+    display: none;
+  }
 
   @media screen and (min-width: 768px) {
-    grid-template-columns: 1fr 3fr 0;
-    gap: 24px;
+    grid-template-columns: repeat(4, 1fr);
+
+    > aside:first-of-type {
+      grid-column: 1/2;
+    }
+    > main {
+      grid-column: 2/-1;
+    }
   }
 
   @media screen and (min-width: 1024px) {
-    grid-template-columns: 1fr 2fr 1fr;
+    > aside:first-of-type {
+      grid-column: 1/2;
+    }
+    > main {
+      grid-column: 2/-2;
+    }
+    > aside:last-of-type {
+      display: block;
+      grid-column: -1/-2;
+    }
   }
 }