From c25e1016477c3362d1f791d46e585f99a56a3438 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Mon, 12 Sep 2022 10:58:48 +0300
Subject: [PATCH] fix: add new breakpoint util

---
 .../StoryPageContent/StoryPageContent.tsx     |  2 +-
 .../PostDetailsPage.skeleton.tsx              | 50 ++++++++++---------
 .../pages/PostDetailsPage/PostDetailsPage.tsx |  4 +-
 .../pages/OverviewPage/OverviewPage.tsx       |  2 +-
 src/styles/index.scss                         |  9 ++--
 src/styles/tw.scss                            |  6 +++
 tailwind.config.js                            |  3 ++
 7 files changed, 43 insertions(+), 33 deletions(-)

diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
index 810bd82..7a563fc 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
@@ -28,7 +28,7 @@ export default function StoryPageContent({ story }: Props) {
     return (
         <>
             <div id="content" className="bg-white md:p-32 md:border-2 border-gray-200 rounded-16 relative"> </div>
-            <Card id="content" onlyMd className="relative">
+            <Card id="content" onlyMd className="relative max">
                 {story.cover_image &&
                     <img src={story.cover_image}
                         className='w-full object-cover rounded-12 md:rounded-16 mb-16'
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
index e346ec3..091c0ef 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
@@ -26,32 +26,34 @@ export default function PostDetailsPageSkeleton() {
 
     return (
 
-        <div
-            className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
-        >
-            <aside id='actions' className='no-scrollbar'>
-                <div className="sticky"
-                    style={{
-                        top: `${navHeight + 16}px`,
-                        maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
-                    }}>
-                    <PostActionsSkeleton />
-                </div>
-            </aside>
+        <div className="page-container max-md:bg-white">
+            <div
+                className={`grid pt-16 w-full gap-32 ${styles.grid}`}
+            >
+                <aside id='actions' className='no-scrollbar'>
+                    <div className="sticky"
+                        style={{
+                            top: `${navHeight + 16}px`,
+                            maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
+                        }}>
+                        <PostActionsSkeleton />
+                    </div>
+                </aside>
 
 
-            <PageContentSkeleton />
-            <aside id='author' className='no-scrollbar min-w-0'>
-                <div className="flex flex-col gap-24"
-                    style={{
-                        top: `${navHeight + 16}px`,
-                        maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
-                        overflowY: "scroll",
-                    }}>
-                    <AuthorCardSkeleton />
-                    <TrendingCard />
-                </div>
-            </aside>
+                <PageContentSkeleton />
+                <aside id='author' className='no-scrollbar min-w-0'>
+                    <div className="flex flex-col gap-24"
+                        style={{
+                            top: `${navHeight + 16}px`,
+                            maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
+                            overflowY: "scroll",
+                        }}>
+                        <AuthorCardSkeleton />
+                        <TrendingCard />
+                    </div>
+                </aside>
+            </div>
         </div>
     )
 }
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 42b7f54..2994964 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
@@ -45,10 +45,10 @@ export default function PostDetailsPage() {
             </Helmet>
             <ScrollToTop />
             <div
-                className={`page-container`}
+                className={`page-container max-md:bg-white`}
             >
                 <div className={`grid w-full gap-32 ${styles.grid}`}>
-                    <aside id='actions' className='no-scrollbar'>
+                    <aside id='actions' className='no-scrollbar fill-container'>
                         <div className="sticky-side-element">
                             <PostActions post={post} />
                         </div>
diff --git a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
index f0de391..3cc08c2 100644
--- a/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
+++ b/src/features/Tournaments/pages/OverviewPage/OverviewPage.tsx
@@ -15,7 +15,7 @@ export default function OverviewPage() {
     const { tournamentDetails, makers, myParticipationInfo } = useTournament()
 
     return (
-        <Card onlyMd className='flex flex-col gap-42 bg-white -mx-16 -my-24 md:m-0 px-16'>
+        <Card onlyMd className='flex flex-col gap-42 bg-white max-md:-mx-16 max-md:-mt-24 px-16'>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-24 items-start">
                 <div className='md:col-span-2'>
                     <div
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9abd516..279ae2d 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -28,17 +28,16 @@ body {
   }
 
   display: grid;
-  grid-template-columns: minmax(var(--padding), 1fr) minmax(
-      auto,
-      var(--maxPageWidth, 1440px)
-    ) minmax(var(--padding), 1fr);
+  grid-template-columns:
+    minmax(var(--padding), 1fr) minmax(auto, var(--maxPageWidth, 1440px))
+    minmax(var(--padding), 1fr);
 
   > * {
     grid-column: 2/3;
     min-width: 0;
   }
 
-  > .full-width {
+  > .fill-container {
     grid-column: 1/-1;
   }
 }
diff --git a/src/styles/tw.scss b/src/styles/tw.scss
index 896cb1b..13537ab 100644
--- a/src/styles/tw.scss
+++ b/src/styles/tw.scss
@@ -47,3 +47,9 @@
     @apply rounded-[40px] bg-white overflow-hidden w-full shadow-2xl z-10;
   }
 }
+
+@layer utilities {
+  .fill-grid-row {
+    grid-column: 1/-1;
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index e5a3fba..adc16de 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -92,6 +92,9 @@ module.exports = {
       outline: {
         primary: ["2px solid #7B61FF", "1px"],
       },
+      screens: {
+        'max-md': { 'max': THEME.screens.md + 'px' },
+      }
     },
   },
   variants: {