diff --git a/.changeset/nine-hounds-raise.md b/.changeset/nine-hounds-raise.md
new file mode 100644
index 00000000000..d684ce5a261
--- /dev/null
+++ b/.changeset/nine-hounds-raise.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(BaseHeader): Handle word break on single word. Fixes for AccordionItemHeader, DropdownHeader, etc
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
index 882566ffa8d..3abceb264ef 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.ssr.test.tsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[` should render Accordion on server 1`] = `"
You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.
Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.
"`;
+exports[` should render Accordion on server 1`] = `"You can use Razorpay Route from the Dashboard or using APIs to transfer money to customers. You may also check our docs for detailed instructions.
Just use Razorpay. You may also check our docs for detailed instructions. Please use the search functionality to ask your queries.
"`;
exports[` should render Accordion on server 2`] = `
.c0.c0.c0.c0.c0 {
@@ -177,6 +177,7 @@ exports[` should render Accordion on server 2`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
index 2e909daefd2..e1e01003a97 100644
--- a/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
+++ b/packages/blade/src/components/Accordion/__tests__/__snapshots__/Accordion.web.test.tsx.snap
@@ -175,6 +175,7 @@ exports[` should render 1`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
@@ -965,6 +966,7 @@ exports[`Deprecated should render 1`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
index 807d826bd0c..e0e61f78a14 100644
--- a/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
+++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeader.tsx
@@ -314,6 +314,7 @@ const _BaseHeader = ({
marginTop={makeSize(sizeToken['1'])}
weight="semibold"
color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'}
+ wordBreak="break-word"
>
{title}
diff --git a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
index 8ac7376723c..87e65b091da 100644
--- a/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
+++ b/packages/blade/src/components/BaseHeaderFooter/BaseHeaderFooter.internal.stories.tsx
@@ -56,6 +56,17 @@ export const BaseHeaderKitchenSink = (): React.ReactElement => {
showBackButton={true}
/>
+
+ }
+ title="When_Title_Does_Not_Break_Word_And_Goes_On_Next_Line"
+ subtitle="When The Subtitle of this BaseHeader is So Largeeeee That It Goes On Next Line"
+ titleSuffix={New}
+ trailing={Apply}
+ showCloseButton={true}
+ showBackButton={true}
+ />
+
should render a BottomSheet ssr 1`] = `"Saving addresses will improve your checkout experience
"`;
+exports[` should render a BottomSheet ssr 1`] = `"Saving addresses will improve your checkout experience
"`;
exports[` should render a BottomSheet ssr 2`] = `
.c3.c3.c3.c3.c3 {
@@ -311,6 +311,7 @@ exports[` should render a BottomSheet ssr 2`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
index 4fbd9c17986..cea5acd7ce5 100644
--- a/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
+++ b/packages/blade/src/components/BottomSheet/__tests__/__snapshots__/BottomSheet.web.test.tsx.snap
@@ -1122,6 +1122,7 @@ exports[` should render Header/Footer/Body properly on opened sta
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap b/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap
index cc7774f1c50..33c6728b7a4 100644
--- a/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap
+++ b/packages/blade/src/components/Drawer/__tests__/__snapshots__/Drawer.web.test.tsx.snap
@@ -262,6 +262,7 @@ exports[`Drawer renders a Drawer 1`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
index 4dd1951d97b..ce45f231030 100644
--- a/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
+++ b/packages/blade/src/components/Menu/__tests__/__snapshots__/Menu.web.test.tsx.snap
@@ -339,6 +339,7 @@ exports[`Menu renders a Menu 1`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}
diff --git a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
index 645eb0c327d..68f5707c4ff 100644
--- a/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
+++ b/packages/blade/src/components/Modal/__tests__/__snapshots__/Modal.web.test.tsx.snap
@@ -233,6 +233,7 @@ exports[`Modal renders a Modal with Header and Footer 1`] = `
letter-spacing: 0px;
margin: 0;
padding: 0;
+ word-break: break-word;
margin-top: 1px;
}