From d7984ed8e94aae09ed144fc26e346512a7dfcfac Mon Sep 17 00:00:00 2001
From: ninabondar <nina.bondar@voiceflow.com>
Date: Fri, 22 Mar 2024 19:35:29 -0400
Subject: [PATCH] fix: button text overflow (#117)

Fixes button labels overflow
Fixes card titles wrapping behaviour
---
 .gitignore                                            |  3 ++-
 packages/react-chat/src/components/Button/Primary.ts  |  5 ++++-
 .../react-chat/src/components/Card/Card.story.tsx     | 11 +++++++++++
 packages/react-chat/src/components/Card/styled.ts     |  1 +
 .../src/components/Carousel/Carousel.story.tsx        |  4 ++--
 5 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 47d815197e..54203a3501 100644
--- a/.gitignore
+++ b/.gitignore
@@ -32,4 +32,5 @@ nyc_coverage*
 
 .env.*
 
-build-storybook.log
\ No newline at end of file
+build-storybook.log
+storybook-static/
diff --git a/packages/react-chat/src/components/Button/Primary.ts b/packages/react-chat/src/components/Button/Primary.ts
index ddd313334c..474ff82ca7 100644
--- a/packages/react-chat/src/components/Button/Primary.ts
+++ b/packages/react-chat/src/components/Button/Primary.ts
@@ -4,9 +4,12 @@ import { ButtonVariant } from './constants';
 import { Container, tag } from './styled';
 
 export const PrimaryButton = styled(tag(Container, ButtonVariant.PRIMARY), {
-  height: '$md',
+  minHeight: '$md',
   color: '$white',
   trans: ['background-color'],
+  padding: '10px 14px',
+  boxSizing: 'border-box',
+  whiteSpace: 'break-spaces',
 
   variants: {
     type: {
diff --git a/packages/react-chat/src/components/Card/Card.story.tsx b/packages/react-chat/src/components/Card/Card.story.tsx
index 6b944a67ad..5febece944 100644
--- a/packages/react-chat/src/components/Card/Card.story.tsx
+++ b/packages/react-chat/src/components/Card/Card.story.tsx
@@ -37,6 +37,17 @@ export const Actionable: Story = {
   },
 };
 
+export const WithLongLabels: Story = {
+  args: {
+    ...WithImage.args,
+    actions: [
+      { request: {} as any, name: 'First Button with a very long long long wrapping label' },
+      { request: {} as any, name: 'Second Button with a shorter text' },
+      { request: {} as any, name: 'Third button, also with a shorter text' },
+    ],
+  },
+};
+
 export const WithLongTitle: Story = {
   args: {
     ...WithImage.args,
diff --git a/packages/react-chat/src/components/Card/styled.ts b/packages/react-chat/src/components/Card/styled.ts
index 308b076b32..5a55294435 100644
--- a/packages/react-chat/src/components/Card/styled.ts
+++ b/packages/react-chat/src/components/Card/styled.ts
@@ -51,6 +51,7 @@ export const Header = styled(tag('h3', 'header'), {
   color: '$black',
   wordBreak: 'break-word',
   maxWidth: '100%',
+  whiteSpace: 'break-spaces',
 });
 
 export const Description = styled(tag('p', 'description'), {
diff --git a/packages/react-chat/src/components/Carousel/Carousel.story.tsx b/packages/react-chat/src/components/Carousel/Carousel.story.tsx
index 3aad9d234f..f88e3e8022 100644
--- a/packages/react-chat/src/components/Carousel/Carousel.story.tsx
+++ b/packages/react-chat/src/components/Carousel/Carousel.story.tsx
@@ -38,10 +38,10 @@ const MULTIPLE_CARDS = [
     image: IMAGE,
   },
   {
-    title: 'Third Card',
+    title: 'Third Card with a long title that wraps',
     description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
     actions: [
-      { request: {} as any, name: 'Fourth Button' },
+      { request: {} as any, name: 'Fourth Button with a long label that wraps' },
       { request: {} as any, name: 'Fifth Button' },
     ],
   },