ref(crons): Remove illustration in onboarding (#46536)

static/app/components/onboardingPanel.tsx

@@ -6,14 +6,15 @@ import {space} from 'sentry/styles/space';
 interface Props extends React.ComponentProps<typeof Panel> {
   children: React.ReactNode;
   image?: React.ReactNode;
+  noCenter?: boolean;
 }
 
-function OnboardingPanel({image, children, ...props}: Props) {
+function OnboardingPanel({image, noCenter, children, ...props}: Props) {
   return (
     <Panel {...props}>
       <Container>
         {image ? <IlloBox>{image}</IlloBox> : null}
-        <StyledBox centered={!image}>{children}</StyledBox>
+        <StyledBox centered={!image && !noCenter}>{children}</StyledBox>
       </Container>
     </Panel>
   );
@@ -40,6 +41,7 @@ const Container = styled('div')`
 `;
 
 const StyledBox = styled('div')<{centered?: boolean}>`
+  min-width: 0;
   z-index: 1;
 
   ${p => (p.centered ? 'text-align: center;' : '')}
@@ -54,6 +56,7 @@ const IlloBox = styled(StyledBox)`
   position: relative;
   min-height: 100px;
   max-width: 300px;
+  min-width: 150px;
   margin: ${space(2)} auto;
 
   @media (min-width: ${p => p.theme.breakpoints.small}) {

static/app/views/monitors/components/onboarding.tsx

@@ -1,5 +1,3 @@
-import onboardingImg from 'sentry-images/spot/onboarding-preview.svg';
-
 import ExternalLink from 'sentry/components/links/externalLink';
 import OnboardingPanel from 'sentry/components/onboardingPanel';
 import {t, tct} from 'sentry/locale';
@@ -15,7 +13,7 @@ interface Props {
 
 function MonitorOnboarding({orgId, monitor}: Props) {
   return (
-    <OnboardingPanel image={<img src={onboardingImg} />}>
+    <OnboardingPanel noCenter>
       <h3>{t('Instrument your monitor')}</h3>
       <p>
         {tct(