Fix article layout responsiveness (#6821)

abizek · web-flow · commit 3fb72c211a44 · 2024-06-09T19:55:51.000Z
fix(layouts): Responsiveness

Signed-off-by: abizek &lt;abishekilango@protonmail.com&gt;
diff --git a/components/Common/CodeTabs/index.module.css b/components/Common/CodeTabs/index.module.css
@@ -10,9 +10,9 @@
       border-t
       border-neutral-900
       bg-neutral-950
-      px-4
+      px-2
       pt-3
-      xs:px-2;
+      md:px-4;
 
     .trigger {
       @apply border-b
diff --git a/components/Common/LinkTabs/index.module.css b/components/Common/LinkTabs/index.module.css
@@ -7,7 +7,7 @@
     border-b-neutral-200
     font-open-sans
     dark:border-b-neutral-800
-    xs:hidden;
+    max-xs:hidden;
 
   .tabsTrigger {
     @apply border-b-2
@@ -36,6 +36,6 @@
     @apply my-6
       hidden
       w-full
-      xs:flex;
+      max-xs:flex;
   }
 }
diff --git a/components/Common/ProgressionSidebar/index.module.css b/components/Common/ProgressionSidebar/index.module.css
@@ -1,28 +1,28 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     gap-8
     overflow-auto
-    border-r
+    border-r-0
     border-neutral-200
     bg-white
     px-4
     py-6
     dark:border-neutral-900
     dark:bg-neutral-950
+    sm:border-r
     md:max-w-xs
-    lg:px-6
-    xs:w-full
-    xs:border-r-0;
+    lg:px-6;
 
   > section {
-    @apply flex
-      xs:hidden;
+    @apply hidden
+      sm:flex;
   }
 
   > span {
-    @apply hidden
+    @apply flex
       w-full
-      xs:flex;
+      sm:hidden;
   }
 }
diff --git a/components/Containers/MetaBar/index.module.css b/components/Containers/MetaBar/index.module.css
@@ -1,23 +1,16 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     items-start
     gap-8
     overflow-y-auto
-    border-l
-    border-l-neutral-200
+    border-neutral-200
     px-4
     py-6
     [overflow-wrap:anywhere]
-    dark:border-l-neutral-900
-    md:max-w-xs
-    lg:px-6
-    xs:mt-8
-    xs:w-full
-    xs:border-l-0
-    xs:border-t
-    xs:border-t-neutral-200
-    xs:dark:border-t-neutral-900;
+    dark:border-neutral-900
+    lg:px-6;
 
   dl {
     @apply w-full;
@@ -45,8 +38,8 @@
         text-neutral-900
         underline
         dark:text-white
-        xs:inline-block
-        xs:py-1;
+        max-xs:inline-block
+        max-xs:py-1;
 
       &:hover {
         @apply text-neutral-800
diff --git a/components/Containers/Sidebar/index.module.css b/components/Containers/Sidebar/index.module.css
@@ -1,30 +1,29 @@
 .wrapper {
   @apply flex
+    w-full
     flex-col
     items-start
     gap-8
     overflow-auto
     overflow-x-hidden
-    border-r
     border-r-neutral-200
     bg-white
     px-4
     py-6
     dark:border-r-neutral-900
     dark:bg-neutral-950
+    sm:border-r
     md:max-w-xs
-    lg:px-6
-    xs:w-full
-    xs:border-r-0;
+    lg:px-6;
 
   > section {
-    @apply flex
-      xs:hidden;
+    @apply hidden
+      sm:flex;
   }
 
   > span {
-    @apply hidden
+    @apply flex
       w-full
-      xs:flex;
+      sm:hidden;
   }
 }
diff --git a/components/Downloads/ChangelogModal/index.module.css b/components/Downloads/ChangelogModal/index.module.css
@@ -19,14 +19,14 @@
       border
       border-neutral-200
       bg-white
-      p-8
+      p-6
       focus:outline-none
       dark:border-neutral-900
       dark:bg-neutral-950
       sm:my-20
+      sm:p-8
       lg:max-w-[900px]
-      xl:p-12
-      xs:p-6;
+      xl:p-12;
   }
 
   .close {
diff --git a/components/withBlogCategories.tsx b/components/withBlogCategories.tsx
@@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({
         tabs={categories}
         activeTab={blogData.category}
       >
-        <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] xs:grid-cols-[1fr]">
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] max-xs:grid-cols-[1fr]">
           {blogData.posts.map(post => (
             <BlogPostCard
               key={post.slug}
diff --git a/components/withBlogCrossLinks.tsx b/components/withBlogCrossLinks.tsx
@@ -22,7 +22,7 @@ const WithBlogCrossLinks: FC = async () => {
   ];
 
   return (
-    <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
+    <div className="mt-4 grid w-full grid-cols-2 gap-4 max-xs:grid-cols-1">
       {(previousCrossLink && (
         <CrossLink
           type="previous"
diff --git a/components/withSidebarCrossLinks.tsx b/components/withSidebarCrossLinks.tsx
@@ -24,7 +24,7 @@ const WithSidebarCrossLinks: FC<WithCrossLinksProps> = ({ navKey }) => {
   ];
 
   return (
-    <div className="mt-4 grid w-full grid-cols-2 gap-4 xs:grid-cols-1">
+    <div className="mt-4 grid w-full grid-cols-1 gap-4 md:grid-cols-2">
       {(previousCrossLink && (
         <CrossLink
           type="previous"
diff --git a/layouts/About.tsx b/layouts/About.tsx
@@ -13,9 +13,11 @@ const AboutLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithSidebar navKeys={['about', 'getInvolved']} />
 
-      <main>{children}</main>
+      <div>
+        <main>{children}</main>
 
-      <WithMetaBar />
+        <WithMetaBar />
+      </div>
 
       <WithBreadcrumbs navKeys={['about', 'getInvolved']} />
     </ArticleLayout>
diff --git a/layouts/Default.tsx b/layouts/Default.tsx
@@ -12,7 +12,9 @@ const DefaultLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithSidebar navKeys={[]} />
 
-      <main>{children}</main>
+      <div>
+        <main>{children}</main>
+      </div>
     </ArticleLayout>
 
     <WithFooter />
diff --git a/layouts/Learn.tsx b/layouts/Learn.tsx
@@ -14,13 +14,15 @@ const LearnLayout: FC<PropsWithChildren> = ({ children }) => (
     <ArticleLayout>
       <WithProgressionSidebar navKey="learn" />
 
-      <main>
-        {children}
+      <div>
+        <main>
+          {children}
 
-        <WithSidebarCrossLinks navKey="learn" />
-      </main>
+          <WithSidebarCrossLinks navKey="learn" />
+        </main>
 
-      <WithMetaBar />
+        <WithMetaBar />
+      </div>
 
       <WithBreadcrumbs navKeys={['learn']} />
     </ArticleLayout>
diff --git a/layouts/layouts.module.css b/layouts/layouts.module.css
@@ -7,41 +7,54 @@
 
 .articleLayout {
   @apply mx-auto
-    grid
+    block
     w-full
     max-w-8xl
-    grid-rows-[1fr]
-    overflow-hidden
-    grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
-    sm:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
-    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)]
-    xs:m-0
-    xs:block
-    xs:overflow-auto;
+    overflow-auto
+    sm:grid
+    sm:grid-cols-[theme(spacing.52)_1fr]
+    sm:grid-rows-[1fr]
+    sm:overflow-hidden
+    sm:grid-areas-[sidebar_main,sidebar_footer]
+    md:grid-cols-[theme(spacing.64)_1fr]
+    lg:grid-cols-[theme(spacing.52)_1fr_theme(spacing.52)]
+    lg:grid-areas-[sidebar_main_metabar,sidebar_footer_metabar]
+    xl:grid-cols-[theme(spacing.80)_1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
     @apply grid-in-[sidebar];
   }
 
   > *:nth-child(2) {
-    @apply overflow-y-auto
-      overflow-x-hidden
-      bg-gradient-subtle
-      p-12
-      grid-in-[main]
-      motion-safe:scroll-smooth
-      dark:bg-gradient-subtle-dark
-      xl:px-18
-      xs:bg-none
-      xs:p-4
-      xs:dark:bg-none;
-  }
+    @apply contents
+      overflow-y-scroll
+      sm:max-lg:block;
 
-  > *:nth-child(3) {
-    @apply grid-in-[metabar];
+    > *:first-child {
+      @apply overflow-y-auto
+        overflow-x-hidden
+        p-4
+        grid-in-[main]
+        motion-safe:scroll-smooth
+        sm:bg-gradient-subtle
+        sm:bg-fixed
+        sm:p-12
+        sm:dark:bg-gradient-subtle-dark
+        xl:px-18;
+    }
+
+    > *:last-child {
+      @apply mt-8
+        border-t
+        grid-in-[metabar]
+        sm:mt-0
+        lg:max-w-xs
+        lg:border-l
+        lg:border-t-0;
+    }
   }
 
-  > *:nth-child(4) {
+  > *:nth-child(3) {
     @apply sticky
       bottom-0
       flex
@@ -107,7 +120,7 @@
             text-sm
             text-neutral-800
             dark:text-neutral-400
-            xs:text-xs;
+            max-xs:text-xs;
 
           sup {
             @apply cursor-help;
@@ -150,8 +163,8 @@
     justify-center
     bg-gradient-subtle
     dark:bg-gradient-subtle-dark
-    xs:bg-none
-    xs:dark:bg-none;
+    max-xs:bg-none
+    max-xs:dark:bg-none;
 
   main {
     @apply max-w-5xl
@@ -190,10 +203,10 @@
     w-full
     max-w-8xl
     grid-rows-[1fr]
+    max-xs:m-0
+    max-xs:block
     sm:grid-cols-[1fr_theme(spacing.52)]
-    xl:grid-cols-[1fr_theme(spacing.80)]
-    xs:m-0
-    xs:block;
+    xl:grid-cols-[1fr_theme(spacing.80)];
 
   > *:nth-child(1) {
     @apply flex
@@ -206,12 +219,12 @@
       py-14
       dark:border-l-neutral-900
       dark:bg-gradient-subtle-dark
+      max-xs:border-l-0
+      max-xs:bg-none
+      max-xs:pb-4
+      max-xs:dark:bg-none
       md:px-14
-      lg:px-28
-      xs:border-l-0
-      xs:bg-none
-      xs:pb-4
-      xs:dark:bg-none;
+      lg:px-28;
 
     main {
       @apply max-w-[660px]
@@ -220,6 +233,15 @@
         lg:break-normal;
     }
   }
+
+  > *:nth-child(2) {
+    @apply mt-8
+      border-t
+      xs:mt-0
+      xs:max-w-xs
+      xs:border-l
+      xs:border-t-0;
+  }
 }
 
 .postLayout {
diff --git a/styles/markdown.css b/styles/markdown.css
diff --git a/tailwind.config.ts b/tailwind.config.ts

Original file line number	Diff line number	Diff line change
`@@ -30,7 +30,7 @@ const WithBlogCategories: FC<WithBlogCategoriesProps> = ({`
`30`	`30`	`tabs={categories}`
`31`	`31`	`activeTab={blogData.category}`
`32`	`32`	`>`
`33`		`- <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] xs:grid-cols-[1fr]">`
	`33`	`+ <div className="grid grid-cols-[repeat(auto-fill,minmax(theme(spacing.80),1fr))] [grid-gap:theme(spacing.12)_theme(spacing.8)] max-xs:grid-cols-[1fr]">`
`34`	`34`	`{blogData.posts.map(post => (`
`35`	`35`	`<BlogPostCard`
`36`	`36`	`key={post.slug}`