From b49b4568b41c7b29c81263be76abc4255d82fb2c Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenji.shiroma@westpac.com.au>
Date: Fri, 8 Dec 2023 14:52:15 +1000
Subject: [PATCH 1/2] fixes colors mobile version

---
 .../src/components/component-blocks/colors/colors.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/site/src/components/component-blocks/colors/colors.component.tsx b/apps/site/src/components/component-blocks/colors/colors.component.tsx
index a123a4e1e..3872154a6 100644
--- 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" />

From d52236589eb46892b311bf1b886c4f7d8f3b5856 Mon Sep 17 00:00:00 2001
From: Kenji Shiroma <kenji.shiroma@westpac.com.au>
Date: Fri, 8 Dec 2023 14:58:09 +1000
Subject: [PATCH 2/2] fixes examples on movie

---
 .../foundation/font/design/body-font/content.mdoc             | 4 ++--
 .../foundation/font/design/brand-font/content.mdoc            | 2 +-
 .../foundation/font/design/font-weights/content.mdoc          | 2 +-
 apps/site/tailwind.config.ts                                  | 1 +
 4 files changed, 5 insertions(+), 4 deletions(-)

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
index 44ed947dc..3a6f8a9d7 100644
--- 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
index 6cdce1cc7..10aaf3528 100644
--- 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
index debb2d36c..b90f97917 100644
--- 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
index b2de78091..e300cea58 100644
--- 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]',