🐞 Bug Report

Description

Original Bug Report: #165

• The Modal component is experiencing alignment issues when ReactNode is passed to the title and heading props.
• Instead of aligning to the left as for string, content is aligned to the right.
• Additionally, the recent TypeScript migration has restricted these props strictly to string, causing TypeScript errors.
• This is a regression introduced by recent changes to the component's prop types and styling.

Steps to Reproduce

1. Pass a string as the title and heading to Modal.
2. Observe the alignment, which correctly aligns to the left.
3. Pass a ReactNode to the title and heading.
4. Observe the misalignment where content shifts to the right and a TypeScript error occurs.

Expected Behaviour

• The Modal component should accept ReactNode type for title and heading, eliminating TypeScript errors.
• Alignment of title and heading should consistently be to the left, regardless of prop type.

Environment

• OS: macOS
• Browser: Chrome

🔧 Solution

Acceptance Criteria

• Modify the type for title and heading props to support ReactNode.
• Ensure content alignment is consistently to the left.

Technical Notes

• The misalignment occurs due to automatic alignment logic with jn-justify-end when ReactNode lacks a length attribute.

Labels

• 🐞 Regression: Yes
• ⭐ Priority: Medium
• ⏳ Effort: Low
• 📈 Status: Backlog