fix(www): responsive ui of buttons on blog page (#24152)

gatsbyjs · May 18, 2020 · 1d18c52 · 1d18c52
1 parent c2cf27d
commit 1d18c52
Showing 1 changed file with 34 additions and 20 deletions.
diff --git a/www/src/templates/tags.js b/www/src/templates/tags.js
@@ -1,6 +1,8 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
 import React from "react"
+import styled from "@emotion/styled"
+import { mediaQueries } from "gatsby-design-tokens/dist/theme-gatsbyjs-org"
 import { graphql } from "gatsby"
 import { TiTags as TagsIcon, TiArrowRight } from "react-icons/ti"
 
@@ -23,6 +25,16 @@ const preferSpacedTag = tags => {
   return tags[0]
 }
 
+const ButtonWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  ${mediaQueries.xs} {
+    flex-direction: row;
+  }
+`
+
 const Tags = ({ pageContext, data }) => {
   const { tags } = pageContext
   const { nodes, totalCount } = data.allMdx
@@ -40,26 +52,28 @@ const Tags = ({ pageContext, data }) => {
         )}`}
       />
       <h1>{tagHeader}</h1>
-      <Button
-        variant="small"
-        key="blog-post-view-all-tags-button"
-        to="/blog/tags"
-      >
-        View all tags <TagsIcon />
-      </Button>
-      {doc ? (
-        <React.Fragment>
-          <span css={{ margin: 5 }} />
-          <Button
-            variant="small"
-            secondary
-            key={`view-tag-docs-button`}
-            to={doc}
-          >
-            Read the documentation <TiArrowRight />
-          </Button>
-        </React.Fragment>
-      ) : null}
+      <ButtonWrapper>
+        <Button
+          variant="small"
+          key="blog-post-view-all-tags-button"
+          to="/blog/tags"
+        >
+          View all tags <TagsIcon />
+        </Button>
+        {doc ? (
+          <React.Fragment>
+            <span css={{ margin: 5 }} />
+            <Button
+              variant="small"
+              secondary
+              key={`view-tag-docs-button`}
+              to={doc}
+            >
+              Read the documentation <TiArrowRight />
+            </Button>
+          </React.Fragment>
+        ) : null}
+      </ButtonWrapper>
       {nodes.map(node => (
         <BlogPostPreviewItem
           post={node}