fix(www): Fix Compare with Gatsby button on smaller breakpoints (#19063)

Author: Piotr Kumorek

www/src/pages/features/cms.js

@@ -51,26 +51,30 @@ const CmsFeaturesPage = ({ data, location }) => {
             technologies, choose the technologies to compare and then press
             Compare:
           </p>
-          <div
-            sx={{
-              display: `grid`,
-              gridTemplateColumns: `repeat(auto-fit, minmax(75px, 120px))`,
-              gridGap: 2,
-              pb: 10,
-            }}
-          >
-            {featureComparisonOptions.cms.map(({ key: optionKey, display }) => (
-              <CompareButton
-                key={optionKey}
-                optionKey={optionKey}
-                selected={selected[optionKey]}
-                setSelected={setSelected}
-              >
-                {display}
-              </CompareButton>
-            ))}
+          <div sx={{ pb: 10 }}>
+            <div
+              sx={{
+                display: `grid`,
+                gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
+                gridAutoRows: `1fr`,
+                gridGap: 2,
+                pb: 4,
+              }}
+            >
+              {featureComparisonOptions.cms.map(
+                ({ key: optionKey, display }) => (
+                  <CompareButton
+                    key={optionKey}
+                    optionKey={optionKey}
+                    selected={selected[optionKey]}
+                    setSelected={setSelected}
+                  >
+                    {display}
+                  </CompareButton>
+                )
+              )}
+            </div>
             <Button
-              overrideCSS={{ whiteSpace: `pre-wrap` }}
               to={
                 hasSelected
                   ? `/features/cms/gatsby-vs-${comparators.join(`-vs-`)}`

www/src/pages/features/jamstack.js

@@ -54,12 +54,14 @@ const JamstackFeaturesPage = ({ data, location }) => {
             technologies, choose the technologies to compare and then press
             Compare:
           </p>
+
           <div
             sx={{
               display: `grid`,
               gridTemplateColumns: `repeat(auto-fit, minmax(75px, 1fr))`,
               gridAutoRows: `1fr`,
               gridGap: 2,
+              pb: 4,
             }}
           >
             {featureComparisonOptions.jamstack.map(
@@ -74,17 +76,16 @@ const JamstackFeaturesPage = ({ data, location }) => {
                 </CompareButton>
               )
             )}
-            <Button
-              overrideCSS={{ whiteSpace: `pre-wrap` }}
-              to={
-                hasSelected
-                  ? `/features/jamstack/gatsby-vs-${comparators.join(`-vs-`)}`
-                  : location.pathname
-              }
-            >
-              Compare with Gatsby
-            </Button>
           </div>
+          <Button
+            to={
+              hasSelected
+                ? `/features/jamstack/gatsby-vs-${comparators.join(`-vs-`)}`
+                : location.pathname
+            }
+          >
+            Compare with Gatsby
+          </Button>
           <EvaluationTable
             options={featureComparisonOptions.jamstack}
             sections={sections}