Merge pull request #512 from WestpacGEL/fix/colors-mobile

fixes colors mobile version
WestpacGEL · Dec 8, 2023 · 0d61449 · 0d61449
2 parents 4520cfe + d522365
commit 0d61449
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 5 deletions.
diff --git a/apps/site/src/components/component-blocks/colors/colors.component.tsx b/apps/site/src/components/component-blocks/colors/colors.component.tsx
@@ -15,7 +15,7 @@ export function Colors({ palette }: { palette: string }) {
   return (
     <Grid tag="ul" className="mt-2">
       {colorPalette.map(color => (
-        <Item key={color.name} tag="li" span={{ intial: 12, xsl: 6, sm: 4, md: 3 }}>
+        <Item key={color.name} tag="li" span={{ initial: 12, xsl: 6, sm: 4, md: 3 }}>
           <div className="flex flex-row items-center bg-white p-4 xsl:flex-col xsl:items-stretch">
             <Svg viewBox="0 0 132 132" width={132} height={132}>
               <circle fill={color.hex} cx="66" cy="66" r="66" />

diff --git a/apps/site/src/content/design-system/foundation/font/design/body-font/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/body-font/content.mdoc
@@ -14,7 +14,7 @@ _**Note:**_ _Never use a web font without confirmation that you have the correct
 
 ```tsx
 <div>
-  <p className="typography-body-10 text-muted italic">Sans serif system font</p>
-  <p className="typography-body-4">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$¢%&*©®™£</p>
+  <p className="typography-body-10 text-muted italic break-words">Sans serif system font</p>
+  <p className="typography-body-4 break-words">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$¢%&*©®™£</p>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/brand-font/content.mdoc
@@ -7,6 +7,6 @@ _**Note:**_ _Never use a web font without confirmation that you have the correct
 ```tsx
 <div>
   <p className="typography-body-10 text-muted italic">Brand Bold</p>
-  <p className="typography-brand-4">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$¢%&*©®™£</p>
+  <p className="typography-brand-4 break-words">abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$¢%&*©®™£</p>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/foundation/font/design/font-weights/content.mdoc b/apps/site/src/content/design-system/foundation/font/design/font-weights/content.mdoc
@@ -4,7 +4,7 @@ _**Note:**_ _Do not use 300 (light) on text sizes below 18px or your text may fa
 
 ```tsx
 <div>
-  <p className="typography-body-10 text-muted italic">Sans serif system font</p>
+  <p className="typography-body-10 text-muted italic break-words">Sans serif system font</p>
 
   <div className="typography-body-4 flex flex-col gap-1">
     <p>

diff --git a/apps/site/tailwind.config.ts b/apps/site/tailwind.config.ts
@@ -77,6 +77,7 @@ const config: Config = withGEL({
     'bg-primary-10',
     'bg-primary-20',
     'bg-success-20',
+    'break-words',
     'italic',
     'text-muted',
     'mb-[0.875rem]',