Merge pull request #223 from chromaui/fix-layout-bug

Fix dramatic layout bug during onboarding
chromaui · Mar 18, 2024 · b83182f · b83182f
2 parents 5f2892a + 1eb2aa4
commit b83182f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/src/components/Text.tsx b/src/components/Text.tsx
@@ -1,8 +1,13 @@
 import { styled } from "@storybook/theming";
 
-export const Text = styled.div<{ center?: boolean; muted?: boolean; small?: boolean }>(
-  ({ center, small, theme }) => ({
-    display: "inline-block",
+export const Text = styled.div<{
+  center?: boolean;
+  muted?: boolean;
+  small?: boolean;
+  block?: boolean;
+}>(
+  ({ center, small, block, theme }) => ({
+    display: block ? "block" : "inline-block",
     color: theme.color.defaultText,
     fontSize: small ? theme.typography.size.s1 : theme.typography.size.s2,
     lineHeight: small ? "18px" : "20px",

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
@@ -1,7 +1,5 @@
 import { styled } from "@storybook/theming";
 
-import { Text as BaseText } from "./Text";
-
 export const Base = styled.div<{ hidden?: boolean }>(({ hidden, theme }) => ({
   background: theme.background.app,
   containerType: "size",

diff --git a/src/screens/Onboarding/Onboarding.tsx b/src/screens/Onboarding/Onboarding.tsx
@@ -179,7 +179,7 @@ export const Onboarding = ({
           <Stack>
             <div>
               <Heading>Nice. Your stories were saved as test baselines.</Heading>
-              <Text center muted>
+              <Text center muted block>
                 This story was indexed and snapshotted in a standardized cloud browser.
               </Text>
               {selectedStory?.selectedComparison?.headCapture?.captureImage && (
@@ -218,7 +218,7 @@ export const Onboarding = ({
           <Stack>
             <div>
               <Heading>Make a change to this story</Heading>
-              <Text center muted>
+              <Text center muted block>
                 In your code, adjust the markup, styling, or assets to see how visual testing works.
                 Don’t worry, you can undo it later. Here are a few ideas to get you started.
               </Text>
@@ -345,7 +345,7 @@ export const Onboarding = ({
           <Stack>
             <div>
               <Heading>Nice. Your stories were saved as test baselines.</Heading>
-              <Text center muted>
+              <Text center muted block>
                 This story was indexed and snapshotted in a standardized cloud browser.
               </Text>
               {selectedStory.selectedComparison?.headCapture?.captureImage && (