Fix prompt title overlap with close button (#6017)

* Fix title potentially overlapping with close button on prompt component

* Change files

* Update packages/react-composites/src/composites/CallComposite/components/Prompt.tsx

Co-authored-by: Copilot <[email protected]>
Signed-off-by: mgamis-msft <[email protected]>

---------

Signed-off-by: mgamis-msft <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: mgamis-msft

change/@azure-communication-react-e4ff9a18-4445-451e-88ed-1c21be5b7163.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Fix title potentially overlapping with close button on prompt component",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/components/Prompt.tsx

@@ -43,7 +43,16 @@ export const Prompt = (props: PromptProps): JSX.Element => {
   return (
     <Modal styles={styles} isOpen={props.isOpen} onDismiss={props.onDismiss} isBlocking={false}>
       <Stack className={mergeStyles({ position: 'relative' })}>
-        <Text className={mergeStyles({ fontWeight: 600, fontSize: '1.25rem' })}>{props.heading}</Text>
+        <Text
+          className={mergeStyles({
+            fontWeight: 600,
+            fontSize: '1.25rem',
+            paddingRight: '2rem',
+            overflowWrap: 'break-word'
+          })}
+        >
+          {props.heading}
+        </Text>
         <IconButton
           styles={iconButtonStyles(theme)}
           iconProps={{ iconName: 'Cancel' }}