diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
index 2f4b94ecf..42b037f7e 100644
--- a/src/components/Breakdown.jsx
+++ b/src/components/Breakdown.jsx
@@ -52,14 +52,20 @@ const BreakdownItem = ({
     return (
         <tr className={clsx("ui-breakdown-item", colors[color], className)} {...rest}>
             <td colSpan={2} className={clsx("break-all text-left leading-none", classNames.key)}>
-                <span className="mr-0.5">{methodIcon}</span>
-                <span className={clsx("break-normal", classNames.children)}>{children}</span>
-                <span className={clsx("ml-1 text-sm", classNames.info)}>
-                    {info && (
-                        <span className="mr-2 rounded bg-white p-1 uppercase text-black empty:hidden">{info}</span>
-                    )}
-                    {secondary && <span className="empty:hidden">{secondary}</span>}
-                </span>
+                <div className="flex flex-wrap items-center leading-3.5">
+                    <span className="break-word">
+                        <span className="mr-0.5">{methodIcon}</span>
+                        <span className={clsx("break-normal", classNames.children)}>{children}</span>
+                    </span>
+                    <span className="ml-1 text-sm">
+                        {info && (
+                            <span className="mr-2 ml-1 rounded bg-white p-1 uppercase leading-6 text-black empty:hidden">
+                                {info}
+                            </span>
+                        )}
+                        {secondary && <span className="empty:hidden">{secondary}</span>}
+                    </span>
+                </div>
             </td>
 
             <td className={clsx("w-[1%] whitespace-nowrap pl-4 text-right", classNames.value)}>
diff --git a/src/components/Modal.jsx b/src/components/Modal.jsx
index 7daa04d0a..bc0f6c46f 100644
--- a/src/components/Modal.jsx
+++ b/src/components/Modal.jsx
@@ -8,7 +8,7 @@ const sizes = {
     small: "max-w-100", // 400px
     medium: "max-w-125", // 500px
     large: "max-w-150", // 600px
-    huge: "max-w-200", // 800px
+    huge: "max-w-[900px]", // 900px
 };
 
 const positions = {
diff --git a/src/stories/Other/Breakdown.stories.js b/src/stories/Other/Breakdown.stories.js
index c1c8fbcf5..d99ab98c7 100644
--- a/src/stories/Other/Breakdown.stories.js
+++ b/src/stories/Other/Breakdown.stories.js
@@ -22,7 +22,7 @@ export const Default = () => {
             <Breakdown currency="USD">
                 <Breakdown.Item value={100}>Line item caption</Breakdown.Item>
                 <Breakdown.Item value={29} secondary="($29.00 x 1)">
-                    Children
+                    Very long really Children
                 </Breakdown.Item>
                 <Breakdown.Item value={29} secondary="($29.00 x 1)">
                     Adults
@@ -46,12 +46,12 @@ export const Default = () => {
                     Payment
                 </Breakdown.Item>
 
-                <Breakdown.Item color="primary" secondary="07/23/2021" value={-62} methodIcon={<CardIcon />}>
+                <Breakdown.Item color="primary" info="*0259" secondary="07/23/2021" value={-62} methodIcon={<CardIcon />}>
                     Return Payment
                 </Breakdown.Item>
 
                 <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
-                    This is a really long message that should wrap somehow
+                    This is a really long message that should wrap somehow more long
                 </Breakdown.Item>
 
                 <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>