fix(growth): Fix demo banner layout on mobile

static/app/components/demo/demoHeader.tsx

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
 
 import Button from 'app/components/button';
-import ButtonBar from 'app/components/buttonBar';
 import ExternalLink from 'app/components/links/externalLink';
 import LogoSentry from 'app/components/logoSentry';
 import {t} from 'app/locale';
@@ -27,53 +26,56 @@ export default function DemoHeader() {
   return (
     <Wrapper collapsed={collapsed}>
       <StyledLogoSentry />
-      <ButtonBar gap={4}>
-        <StyledExternalLink
-          onClick={() =>
-            trackAdvancedAnalyticsEvent('growth.demo_click_docs', {organization: null})
-          }
-          href={urlAttachQueryParams('https://docs.sentry.io/', extraSearchParams)}
-          openInNewTab
-        >
-          {t('Documentation')}
-        </StyledExternalLink>
-        <BaseButton
-          priority="form"
-          onClick={() =>
-            trackAdvancedAnalyticsEvent('growth.demo_click_request_demo', {
-              organization: null,
-            })
-          }
-          href={urlAttachQueryParams('https://sentry.io/_/demo/', extraSearchParams)}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          {t('Request a Demo')}
-        </BaseButton>
-        <GetStarted
-          onClick={() => {
-            const url = saasOrgSlug
-              ? `https://sentry.io/settings/${saasOrgSlug}/billing/checkout/`
-              : urlAttachQueryParams(
-                  'https://sentry.io/signup/',
-                  extraQueryParameterWithEmail()
-                );
-
-            // Using window.open instead of href={} because we need to read `email`
-            // from localStorage when the user clicks the button.
-            window.open(url, '_blank');
-
-            trackAdvancedAnalyticsEvent('growth.demo_click_get_started', {
-              is_upgrade: !!saasOrgSlug,
-              organization: null,
-            });
-          }}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
+      <StyledExternalLink
+        onClick={() =>
+          trackAdvancedAnalyticsEvent('growth.demo_click_docs', {organization: null})
+        }
+        href={urlAttachQueryParams('https://docs.sentry.io/', extraSearchParams)}
+        openInNewTab
+      >
+        {t('Documentation')}
+      </StyledExternalLink>
+      <RequestDemoBtn
+        priority="form"
+        onClick={() =>
+          trackAdvancedAnalyticsEvent('growth.demo_click_request_demo', {
+            organization: null,
+          })
+        }
+        href={urlAttachQueryParams('https://sentry.io/_/demo/', extraSearchParams)}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {t('Request a Demo')}
+      </RequestDemoBtn>
+      <GetStarted
+        onClick={() => {
+          const url = saasOrgSlug
+            ? `https://sentry.io/settings/${saasOrgSlug}/billing/checkout/`
+            : urlAttachQueryParams(
+                'https://sentry.io/signup/',
+                extraQueryParameterWithEmail()
+              );
+
+          // Using window.open instead of href={} because we need to read `email`
+          // from localStorage when the user clicks the button.
+          window.open(url, '_blank');
+
+          trackAdvancedAnalyticsEvent('growth.demo_click_get_started', {
+            is_upgrade: !!saasOrgSlug,
+            organization: null,
+          });
+        }}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <GetStartedTextLong>
           {saasOrgSlug ? t('Upgrade Now') : t('Sign Up for Free')}
-        </GetStarted>
-      </ButtonBar>
+        </GetStartedTextLong>
+        <GetStartedTextShort>
+          {saasOrgSlug ? t('Upgrade') : t('Sign Up')}
+        </GetStartedTextShort>
+      </GetStarted>
     </Wrapper>
   );
 }
@@ -86,6 +88,9 @@ const Wrapper = styled('div')<{collapsed: boolean}>`
   display: flex;
   justify-content: space-between;
   text-transform: uppercase;
+  align-items: center;
+  white-space: nowrap;
+  gap: 3rem;
 
   margin-left: calc(
     -1 * ${p => (p.collapsed ? p.theme.sidebar.collapsedWidth : p.theme.sidebar.expandedWidth)}
@@ -106,6 +111,7 @@ const StyledLogoSentry = styled(LogoSentry)`
   margin-top: auto;
   margin-bottom: auto;
   margin-left: 20px;
+  margin-right: auto;
   width: 130px;
   height: 30px;
   color: ${p => p.theme.textColor};
@@ -116,14 +122,40 @@ const BaseButton = styled(Button)`
   text-transform: uppercase;
 `;
 
+const RequestDemoBtn = styled(BaseButton)`
+  @media (max-width: ${p => p.theme.breakpoints[0]}) {
+    display: none;
+  }
+`;
+
+const GetStartedTextShort = styled('span')`
+  display: none;
+`;
+
+const GetStartedTextLong = styled('span')``;
+
 // Note many of the colors don't come from the theme as they come from the marketing site
 const GetStarted = styled(BaseButton)`
   border-color: transparent;
   box-shadow: 0 2px 0 rgb(54 45 89 / 10%);
   background-color: #e1567c;
   color: #fff;
+  .short-text {
+    display: none;
+  }
+  @media (max-width: 650px) {
+    ${GetStartedTextLong} {
+      display: none;
+    }
+    ${GetStartedTextShort} {
+      display: inline;
+    }
+  }
 `;
 
 const StyledExternalLink = styled(ExternalLink)`
   color: #584774;
+  @media (max-width: 500px) {
+    display: none;
+  }
 `;