fix: button text overflow (#117)

Fixes button labels overflow 
Fixes card titles wrapping behaviour

.gitignore

@@ -32,4 +32,5 @@ nyc_coverage*
 
 .env.*
 
-build-storybook.log
+build-storybook.log
+storybook-static/

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: {

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,

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'), {

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' },
     ],
   },