ref(onboarding): Introduce spacing improvements (#78113)

static/app/gettingStartedDocs/android/android.tsx

@@ -138,7 +138,9 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
               {
                 description: (
                   <Fragment>
-                    {t('The Sentry wizard will automatically patch your application:')}
+                    <p>
+                      {t('The Sentry wizard will automatically patch your application:')}
+                    </p>
                     <List symbol="bullet">
                       <ListItem>
                         {tct(
@@ -171,18 +173,16 @@ const onboarding: OnboardingConfig<PlatformOptions> = {
                         )}
                       </ListItem>
                     </List>
-                    <p>
-                      {tct(
-                        'Alternatively, you can also [manualSetupLink:set up the SDK manually].',
-                        {
-                          manualSetupLink: (
-                            <ExternalLink href="https://docs.sentry.io/platforms/android/manual-setup/" />
-                          ),
-                        }
-                      )}
-                    </p>
                   </Fragment>
                 ),
+                additionalInfo: tct(
+                  'Alternatively, you can also [manualSetupLink:set up the SDK manually].',
+                  {
+                    manualSetupLink: (
+                      <ExternalLink href="https://docs.sentry.io/platforms/android/manual-setup/" />
+                    ),
+                  }
+                ),
               },
             ],
           },

static/app/gettingStartedDocs/javascript/nextjs.tsx

@@ -87,9 +87,11 @@ const onboarding: OnboardingConfig = {
       configurations: getInstallConfig(params),
       additionalInfo: (
         <Fragment>
-          {t(
-            'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
-          )}
+          <p>
+            {t(
+              'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
+            )}
+          </p>
           <List symbol="bullet">
             <ListItem>
               {tct(

static/app/gettingStartedDocs/javascript/sveltekit.tsx

@@ -1,5 +1,3 @@
-import {Fragment} from 'react';
-
 import ExternalLink from 'sentry/components/links/externalLink';
 import List from 'sentry/components/list/';
 import ListItem from 'sentry/components/list/listItem';
@@ -63,53 +61,49 @@ const onboarding: OnboardingConfig = {
   configure: () => [
     {
       type: StepType.CONFIGURE,
+      description: t(
+        'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
+      ),
       configurations: [
         {
           description: (
-            <Fragment>
-              {t(
-                'The Sentry wizard will automatically patch your application to configure the Sentry SDK:'
-              )}
-              <List symbol="bullet">
-                <ListItem>
-                  {tct(
-                    'Create or update [hookClientCode:src/hooks.client.js] and [hookServerCode:src/hooks.server.js] with the default [sentryInitCode:Sentry.init] call and SvelteKit hooks handlers.',
-                    {
-                      hookClientCode: <code />,
-                      hookServerCode: <code />,
-                      sentryInitCode: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {tct(
-                    'Update [code:vite.config.js] to add source maps upload and auto-instrumentation via Vite plugins.',
-                    {
-                      code: <code />,
-                    }
-                  )}
-                </ListItem>
-                <ListItem>
-                  {tct(
-                    'Create [sentryClircCode:.sentryclirc] and [sentryPropertiesCode:sentry.properties] files with configuration for sentry-cli (which is used when automatically uploading source maps).',
-                    {
-                      sentryClircCode: <code />,
-                      sentryPropertiesCode: <code />,
-                    }
-                  )}
-                </ListItem>
-              </List>
-              <p>
+            <List symbol="bullet">
+              <ListItem>
+                {tct(
+                  'Create or update [hookClientCode:src/hooks.client.js] and [hookServerCode:src/hooks.server.js] with the default [sentryInitCode:Sentry.init] call and SvelteKit hooks handlers.',
+                  {
+                    hookClientCode: <code />,
+                    hookServerCode: <code />,
+                    sentryInitCode: <code />,
+                  }
+                )}
+              </ListItem>
+              <ListItem>
                 {tct(
-                  'Alternatively, you can also [manualSetupLink:set up the SDK manually].',
+                  'Update [code:vite.config.js] to add source maps upload and auto-instrumentation via Vite plugins.',
                   {
-                    manualSetupLink: (
-                      <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/" />
-                    ),
+                    code: <code />,
                   }
                 )}
-              </p>
-            </Fragment>
+              </ListItem>
+              <ListItem>
+                {tct(
+                  'Create [sentryClircCode:.sentryclirc] and [sentryPropertiesCode:sentry.properties] files with configuration for sentry-cli (which is used when automatically uploading source maps).',
+                  {
+                    sentryClircCode: <code />,
+                    sentryPropertiesCode: <code />,
+                  }
+                )}
+              </ListItem>
+            </List>
+          ),
+          additionalInfo: tct(
+            'Alternatively, you can also [manualSetupLink:set up the SDK manually].',
+            {
+              manualSetupLink: (
+                <ExternalLink href="https://docs.sentry.io/platforms/javascript/guides/sveltekit/manual-setup/" />
+              ),
+            }
           ),
         },
       ],