Merge pull request #10861 from amit-ksh/page-hero-buttons-margin

Align button container with text

Author: nhsz

src/components/PageHero.tsx

@@ -95,7 +95,9 @@ const PageHero: React.FC<IProps> = ({
             {subtitle}
           </Text>
           {buttons && (
-            <Wrap spacing={2} overflow="visible">
+            // FIXME: remove the `ul` override once removed the corresponding
+            // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
+            <Wrap spacing={2} overflow="visible" sx={{ ul: { m: 0 } }}>
               {buttons.map((button, idx) => {
                 if (isButtonLink(button)) {
                   return (

src/templates/roadmap.tsx

@@ -227,7 +227,9 @@ const RoadmapPage = ({
             <Title>{mdx.frontmatter.title}</Title>
             <Text>{mdx.frontmatter.description}</Text>
             {mdx?.frontmatter?.buttons && (
-              <Wrap spacing={2} marginBottom={4}>
+              // FIXME: remove the `ul` override once removed the corresponding
+              // global styles in `src/@chakra-ui/gatsby-plugin/styles.ts`
+              <Wrap spacing={2} marginBottom={4} sx={{ ul: { m: 0 } }}>
                 {mdx.frontmatter.buttons.map((button, idx) => {
                   if (button?.to) {
                     return (