Просмотр исходного кода

style(feedback): fix padding in onboarding tray (#72566)

before:

<img width="478" alt="SCR-20240611-nwlo"
src="https://github.com/getsentry/sentry/assets/56095982/c246487a-c222-452e-90ba-f81ce4de72b4">

after:

<img width="382" alt="SCR-20240611-nvtj"
src="https://github.com/getsentry/sentry/assets/56095982/c2a79291-a9c8-4d53-bd1f-1ac6435c02b2">
Michelle Zhang 9 месяцев назад
Родитель
Сommit
082ee4fd49
1 измененных файлов с 22 добавлено и 12 удалено
  1. 22 12
      static/app/gettingStartedDocs/javascript/nextjs.tsx

+ 22 - 12
static/app/gettingStartedDocs/javascript/nextjs.tsx

@@ -241,18 +241,22 @@ const feedbackOnboarding: OnboardingConfig = {
         },
       ],
       additionalInfo: (
-        <Fragment>
-          {tct(
-            'Alert: The User Feedback integration must be added to your [sentryClient:sentry.client.config.js] file. Adding it to any server-side configuration files (like [instrumentation:instrumentation.ts]) will break your build because the Replay integration depends on Browser APIs.',
-            {
-              sentryClient: <code />,
-              instrumentation: <code />,
-            }
-          )}
-          {crashReportCallout({
-            link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/#crash-report-modal',
-          })}
-        </Fragment>
+        <AdditionalInfoWrapper>
+          <div>
+            {tct(
+              'Alert: The User Feedback integration must be added to your [sentryClient:sentry.client.config.js] file. Adding it to any server-side configuration files (like [instrumentation:instrumentation.ts]) will break your build because the Replay integration depends on Browser APIs.',
+              {
+                sentryClient: <code />,
+                instrumentation: <code />,
+              }
+            )}
+          </div>
+          <div>
+            {crashReportCallout({
+              link: 'https://docs.sentry.io/platforms/javascript/guides/nextjs/user-feedback/#crash-report-modal',
+            })}
+          </div>
+        </AdditionalInfoWrapper>
       ),
     },
   ],
@@ -298,3 +302,9 @@ const ManualSetupTitle = styled('p')`
   font-size: ${p => p.theme.fontSizeLarge};
   font-weight: ${p => p.theme.fontWeightBold};
 `;
+
+const AdditionalInfoWrapper = styled('div')`
+  display: flex;
+  flex-direction: column;
+  gap: ${space(2)};
+`;