X2-9433 Breakdown Item line fix (#337)

* X2-9433 Breakdown Item line fix * format fixes * check * fix
xola · Aug 1, 2024 · e1c740e · e1c740e
1 parent 5f3f9dc
commit e1c740e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/src/components/Breakdown.jsx b/src/components/Breakdown.jsx
@@ -53,7 +53,7 @@ const BreakdownItem = ({
         <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("break-normal md:break-all", 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>

diff --git a/src/stories/Other/Breakdown.stories.js b/src/stories/Other/Breakdown.stories.js
@@ -58,6 +58,10 @@ export const Default = () => {
                     LongMessageThat ShouldOnlyBreakAt AWhitespaceLoremIpsum
                 </Breakdown.Item>
 
+                <Breakdown.Item secondary="07/23/2021" info={<EmptyComponent />} value={0} methodIcon={<CardIcon />}>
+                    SmallMessage LongMessageThatShouldOnlyBreakAtAWhitespaceLoremIpsum
+                </Breakdown.Item>
+
                 <Breakdown.Separator />
 
                 <Breakdown.SubtotalItem info="Paid" value={62}>