feat(Composed Modal): L3-10837 add min-widths to ComposedModal

[aahill50]

Jira ticket

L3-10837

Screenshots

Figma link

Figma

Summary

Adds min-width to the ComposedModal, for both mobile and desktop screens sizes

Change List (describe the changes made to the files)

This pull request updates the modal sizing logic in the ComposedModal component to improve its responsiveness and ensure more consistent minimum widths across different screen sizes. The main focus is on refining the minimum width and removing redundant width settings.

Modal sizing and responsiveness updates:

• Set a new default min-width of 35rem for .composed-modal, replacing the previous value of 0, to ensure a reasonable minimum modal size on larger screens.
• Added a media query for screens smaller than $breakpoint-md to set the min-width to 22.5rem, improving usability on medium and small devices.
• Removed the explicit width: 95vw; property and the media query that set width: auto; for larger screens, simplifying the width logic and relying on max-width and min-width for sizing. [1] [2]

Things to look for during review

• PR title should correctly describe the most significant type of commit. I.e. feat(scope): ... if a minor release should be triggered.
• All commit messages follow convention and are appropriate for the changes
• All references to phillips class prefix are using the prefix variable
• All major areas have a data-testid attribute.
• Document all props with jsdoc comments
• All strings should be translatable.
• Unit tests should be written and should have a coverage of 90% or higher in all areas.

New Components

• Are there any accessibility considerations that need to be taken into account and tested?
• Default story called "Playground" should be created for all new components
• Create a jsdoc comment that has an Overview section and a link to the Figma design for the component
• Export the component and its typescript type from the index.ts file
• Import the component scss file into the componentStyles.scss file.

[netlify]

✅ Deploy Preview for phillips-seldon ready!

Name	Link
🔨 Latest commit	3c94b15
🔍 Latest deploy log	https://app.netlify.com/projects/phillips-seldon/deploys/696932ebcd9b2e000883d4f1
😎 Deploy Preview	https://deploy-preview-784--phillips-seldon.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

🚀 Storybook preview is ready.

• Preview: https://68b9f094608b90f3cfec5a06-urgrzlipbh.chromatic.com/
• Chromatic build: https://www.chromatic.com/build?appId=68b9f094608b90f3cfec5a06&number=292

[Copilot]

Pull request overview

This PR adds minimum width constraints to the ComposedModal component to improve its responsiveness and ensure consistent sizing across different screen sizes. The changes align with the Figma design specifications for the modal component.

Key Changes

• Set default min-width of 35rem for desktop viewports
• Added responsive min-width of 22.5rem for mobile/tablet viewports (below 961px)
• Removed explicit width: 95vw property and its corresponding media query override, simplifying the sizing logic to rely on max-width and min-width constraints