fix(onboarding): Fix onboarding setup docs styles layout glitches (#33216)

* fix sidebar

* fix more styling

* fix title line

static/app/views/onboarding/targetedOnboarding/components/fullIntroduction.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import {motion} from 'framer-motion';
+
+import {openInviteMembersModal} from 'sentry/actionCreators/modal';
+import Button from 'sentry/components/button';
+import {PlatformKey} from 'sentry/data/platformCategories';
+import platforms from 'sentry/data/platforms';
+import {t, tct} from 'sentry/locale';
+
+import SetupIntroduction from './setupIntroduction';
+
+type Props = {
+  currentPlatform: PlatformKey;
+};
+
+export default function FullIntroduction({currentPlatform}: Props) {
+  return (
+    <React.Fragment>
+      <SetupIntroduction
+        stepHeaderText={t(
+          'Prepare the %s SDK',
+          platforms.find(p => p.id === currentPlatform)?.name ?? ''
+        )}
+        platform={currentPlatform}
+      />
+      <motion.p
+        variants={{
+          initial: {opacity: 0},
+          animate: {opacity: 1},
+          exit: {opacity: 0},
+        }}
+      >
+        {tct(
+          "Don't have a relationship with your terminal? [link:Invite your team instead].",
+          {
+            link: (
+              <Button
+                priority="link"
+                data-test-id="onboarding-getting-started-invite-members"
+                onClick={() => {
+                  openInviteMembersModal();
+                }}
+                aria-label={t('Invite your team instead')}
+              />
+            ),
+          }
+        )}
+      </motion.p>
+    </React.Fragment>
+  );
+}

static/app/views/onboarding/targetedOnboarding/components/setupIntroduction.tsx

@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+import {motion} from 'framer-motion';
+import {PlatformIcon} from 'platformicons';
+
+import {PlatformKey} from 'sentry/data/platformCategories';
+import space from 'sentry/styles/space';
+
+import StepHeading from '../../components/stepHeading';
+
+type Props = {
+  platform: PlatformKey;
+  stepHeaderText: string;
+};
+export default function SetupIntroduction({stepHeaderText, platform}: Props) {
+  return (
+    <TitleContainer>
+      <StepHeading step={2}>{stepHeaderText}</StepHeading>
+      <IconWrapper
+        variants={{
+          initial: {opacity: 0, x: 20},
+          animate: {opacity: 1, x: 0},
+          exit: {opacity: 0},
+        }}
+      >
+        <PlatformIcon size={48} format="lg" platform={platform} />
+      </IconWrapper>
+    </TitleContainer>
+  );
+}
+
+const TitleContainer = styled('div')`
+  display: flex;
+  gap: ${space(2)};
+
+  ${StepHeading} {
+    margin-bottom: 0;
+    min-width: 0;
+  }
+`;
+
+const IconWrapper = styled(motion.div)`
+  margin-left: auto;
+  flex-shrink: 0;
+`;

static/app/views/onboarding/targetedOnboarding/components/sidebar.tsx

@@ -33,22 +33,18 @@ function Sidebar({
         isActive={isActive}
         onClick={() => setNewProject(project.id)}
       >
-        <IconWrapper>
-          <PlatformIcon platform={project.platform || 'other'} size={36} />
-        </IconWrapper>
+        <PlatformIcon platform={project.platform || 'other'} size={36} />
         <MiddleWrapper>
           <NameWrapper>{name}</NameWrapper>
           <SubHeader errorReceived={errorReceived} data-test-id="sidebar-error-indicator">
             {errorReceived ? t('Error Received') : t('Waiting for error')}
           </SubHeader>
         </MiddleWrapper>
-        <IconWrapper>
-          {errorReceived ? (
-            <IconCheckmark isCircled color="green400" />
-          ) : (
-            isActive && <WaitingIndicator />
-          )}
-        </IconWrapper>
+        {errorReceived ? (
+          <StyledIconCheckmark isCircled color="green400" />
+        ) : (
+          isActive && <WaitingIndicator />
+        )}
       </ProjectWrapper>
     );
   };
@@ -70,8 +66,9 @@ const Title = styled('span')`
 `;
 
 const ProjectWrapper = styled('div')<{isActive: boolean}>`
-  display: grid;
-  grid-template-columns: fit-content(100%) 230px fit-content(100%);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   background-color: ${p => p.isActive && p.theme.gray100};
   padding: ${space(2)};
   cursor: pointer;
@@ -91,21 +88,23 @@ const indicatorAnimation: Variants = {
 
 const WaitingIndicator = styled(motion.div)`
   margin: 0 6px;
+  flex-shrink: 0;
   ${pulsingIndicatorStyles};
   background-color: ${p => p.theme.charts.getColorPalette(5)[4]};
 `;
+const StyledIconCheckmark = styled(IconCheckmark)`
+  flex-shrink: 0;
+`;
 
 WaitingIndicator.defaultProps = {
   variants: indicatorAnimation,
   transition: testableTransition(),
 };
 
-const IconWrapper = styled('div')`
-  margin: auto;
-`;
-
 const MiddleWrapper = styled('div')`
   margin: 0 ${space(1)};
+  flex-grow: 1;
+  overflow: hidden;
 `;
 
 const NameWrapper = styled('div')`
@@ -122,4 +121,8 @@ const Wrapper = styled('div')`
   @media (max-width: 1150px) {
     display: none;
   }
+  flex-basis: 240px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  min-width: 240px;
 `;

static/app/views/onboarding/targetedOnboarding/onboarding.tsx

@@ -40,7 +40,6 @@ const ONBOARDING_STEPS: StepDescriptor[] = [
     id: 'welcome',
     title: t('Welcome'),
     Component: TargetedOnboardingWelcome,
-    centered: true,
     cornerVariant: 'top-right',
   },
   {
@@ -161,7 +160,7 @@ function Onboarding(props: Props) {
   };
 
   return (
-    <OnboardingWrapper data-test-id="targeted-onboarding">
+    <main data-test-id="targeted-onboarding">
       <SentryDocumentTitle title={stepObj.title} />
       <Header>
         <LogoSvg />
@@ -183,11 +182,7 @@ function Onboarding(props: Props) {
           onClick={handleGoBack}
         />
         <AnimatePresence exitBeforeEnter onExitComplete={updateAnimationState}>
-          <OnboardingStep
-            centered={stepObj.centered}
-            key={stepObj.id}
-            data-test-id={`onboarding-step-${stepObj.id}`}
-          >
+          <OnboardingStep key={stepObj.id} data-test-id={`onboarding-step-${stepObj.id}`}>
             {stepObj.Component && (
               <stepObj.Component
                 active
@@ -209,26 +204,16 @@ function Onboarding(props: Props) {
         </AnimatePresence>
         <AdaptivePageCorners animateVariant={cornerVariantControl} />
       </Container>
-    </OnboardingWrapper>
+    </main>
   );
 }
 
-const OnboardingWrapper = styled('main')`
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-`;
-
 const Container = styled('div')<{hasFooter: boolean}>`
-  display: flex;
-  justify-content: center;
   position: relative;
   background: ${p => p.theme.background};
   padding: 120px ${space(3)};
   width: 100%;
   margin: 0 auto;
-  flex-grow: 1;
   padding-bottom: ${p => p.hasFooter && '72px'};
   margin-bottom: ${p => p.hasFooter && '72px'};
 `;
@@ -251,14 +236,7 @@ const LogoSvg = styled(LogoSentry)`
   color: ${p => p.theme.textColor};
 `;
 
-const OnboardingStep = styled(motion.div)<{centered?: boolean}>`
-  display: flex;
-  flex-direction: column;
-  ${p =>
-    p.centered &&
-    `justify-content: center;
-     align-items: center;`};
-`;
+const OnboardingStep = styled(motion.div)``;
 
 OnboardingStep.defaultProps = {
   initial: 'initial',

static/app/views/onboarding/targetedOnboarding/platform.tsx

@@ -43,4 +43,6 @@ export default OnboardingPlatform;
 
 const Wrapper = styled('div')`
   max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
 `;

static/app/views/onboarding/targetedOnboarding/setupDocs.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {browserHistory} from 'react-router';
 import {css} from '@emotion/react';
 import styled from '@emotion/styled';
@@ -18,9 +18,9 @@ import getDynamicText from 'sentry/utils/getDynamicText';
 import {Theme} from 'sentry/utils/theme';
 import useApi from 'sentry/utils/useApi';
 import withProjects from 'sentry/utils/withProjects';
-import FullIntroduction from 'sentry/views/onboarding/components/fullIntroduction';
 
 import FirstEventFooter from './components/firstEventFooter';
+import FullIntroduction from './components/fullIntroduction';
 import TargetedOnboardingSidebar from './components/sidebar';
 import {StepProps} from './types';
 
@@ -146,18 +146,21 @@ function SetupDocs({organization, projects, search}: Props) {
   );
 
   return (
-    <Wrapper>
-      <TargetedOnboardingSidebar
-        activeProject={project}
-        {...{checkProjectHasFirstEvent, setNewProject}}
-      />
-      <MainContent>
-        <FullIntroduction currentPlatform={currentPlatform} />
-        {getDynamicText({
-          value: !hasError ? docs : loadingError,
-          fixed: testOnlyAlert,
-        })}
-      </MainContent>
+    <React.Fragment>
+      <Wrapper>
+        <TargetedOnboardingSidebar
+          activeProject={project}
+          {...{checkProjectHasFirstEvent, setNewProject}}
+        />
+        <MainContent>
+          <FullIntroduction currentPlatform={currentPlatform} />
+          {getDynamicText({
+            value: !hasError ? docs : loadingError,
+            fixed: testOnlyAlert,
+          })}
+        </MainContent>
+      </Wrapper>
+
       {project && (
         <FirstEventFooter
           project={project}
@@ -182,7 +185,7 @@ function SetupDocs({organization, projects, search}: Props) {
           }}
         />
       )}
-    </Wrapper>
+    </React.Fragment>
   );
 }
 
@@ -255,12 +258,14 @@ DocsWrapper.defaultProps = {
 };
 
 const Wrapper = styled('div')`
-  display: grid;
-  grid-template-columns: fit-content(100%) fit-content(100%);
-  width: max-content;
+  display: flex;
+  flex-direction: row;
   margin: ${space(2)};
+  justify-content: center;
 `;
 
 const MainContent = styled('div')`
   max-width: 850px;
+  min-width: 0;
+  flex-grow: 1;
 `;

static/app/views/onboarding/targetedOnboarding/types.ts

@@ -25,6 +25,5 @@ export type StepDescriptor = {
   cornerVariant: 'top-right' | 'top-left';
   id: string;
   title: string;
-  centered?: boolean;
   hasFooter?: boolean;
 };

static/app/views/onboarding/targetedOnboarding/welcome.tsx

@@ -156,8 +156,9 @@ const Wrapper = styled(motion.div)`
   display: flex;
   flex-direction: column;
   align-items: center;
-  align-self: center;
   text-align: center;
+  margin-left: auto;
+  margin-right: auto;
 
   h1 {
     font-size: 42px;