From 1f04640859bb6ef6a9652f335f04d2ad16e51e61 Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 30 Sep 2026 12:40:22 -0300
Subject: [PATCH 1/2] fix(BBBModal): wrap long titles instead of pushing the
 close button out

The modal title is a flex item sharing the header row with the close
button, and a flex item does not shrink below its longest word. A title
made of one long unbroken word therefore overflows the header, and the
modal clips both the title and the close button. Since
shouldCloseOnEsc and shouldCloseOnOverlayClick default to false, a
modal rendered with noFooter is left with no way to be closed.

Let the title take the remaining space, shrink below its content width
and break anywhere when needed, so it wraps and the close button stays
inside the modal at any width. Add a gap so the wrapped title never
touches the button.

Closes #83
---
 src/components/Modal/component.tsx | 5 ++---
 src/components/Modal/styles.ts     | 8 ++++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx
index 6376cf1..d7b3146 100644
--- a/src/components/Modal/component.tsx
+++ b/src/components/Modal/component.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react';
 import ReactModal from 'react-modal';
 import * as Styled from './styles';
-import { BBBTypography } from '../Typography';
 import { MdClose } from 'react-icons/md';
 import { BBBDivider } from '../Divider';
 import { ModalProps } from './types';
@@ -61,11 +60,11 @@ const Modal: React.FC<ModalProps> = ({
       testId={testId}
     >
       <Styled.ModalHeader>
-        <BBBTypography
+        <Styled.ModalTitle
           variant="header"
         >
           {title}
-        </BBBTypography>
+        </Styled.ModalTitle>
         {!hideCloseButton && (
           <BBButton
             layout="circle"
diff --git a/src/components/Modal/styles.ts b/src/components/Modal/styles.ts
index 1002ac9..af03f09 100644
--- a/src/components/Modal/styles.ts
+++ b/src/components/Modal/styles.ts
@@ -3,6 +3,7 @@ import { Styles } from 'react-modal';
 import * as React from 'react';
 import { spacingLarge, spacingMedium, spacingSmallMedium, borderRadiusDefault } from '../../stylesheets/sizing';
 import { colorWhite, colorOverlay } from '../../stylesheets/palette';
+import { BBBTypography } from '../Typography';
 import { StyledModalBodyProps, StyledModalFooterProps } from './types';
 
 export const modalStyles: Styles = {
@@ -43,6 +44,13 @@ export const ModalHeader = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: ${spacingMedium};
+`;
+
+export const ModalTitle = styled(BBBTypography)`
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
 `;
 
 export const ModalScrollArea = styled.div<StyledModalBodyProps>`

From 562fb14985932b7a8bba1e459ea6a5d2e139d1aa Mon Sep 17 00:00:00 2001
From: Arthurk12 <arthur_bockmann@hotmail.com>
Date: Wed, 30 Sep 2026 12:40:22 -0300
Subject: [PATCH 2/2] docs(BBBModal): add story with a long unbroken title

Add a LongTitle story to exercise the header layout with a title made
of a single long word, which is the case that used to push the close
button out of the modal.
---
 src/components/Modal/component.stories.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx
index 731eb33..9477286 100644
--- a/src/components/Modal/component.stories.tsx
+++ b/src/components/Modal/component.stories.tsx
@@ -195,6 +195,15 @@ export const Default: Story = {
   render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
 };
 
+/** Long unbroken title that wraps while the close button stays inside the modal. */
+export const LongTitle: Story = {
+  args: {
+    ...Default.args,
+    title: 'Averyveryveryveryveryveryveryveryveryverylongwordwithoutspaces',
+  },
+  render: (args) => <ModalStory {...args}><ModalBody /></ModalStory>,
+};
+
 /** Modal without a header close button, for mandatory-action or externally-controlled flows. */
 export const HideCloseButton: Story = {
   args: {