fix: add new breakpoint util

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'

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>
     )
 }

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>

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

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;
   }
 }

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;
+  }
+}

tailwind.config.js

@@ -92,6 +92,9 @@ module.exports = {
       outline: {
         primary: ["2px solid #7B61FF", "1px"],
       },
+      screens: {
+        'max-md': { 'max': THEME.screens.md + 'px' },
+      }
     },
   },
   variants: {