fix: Confirmation modal can be very narrow #976 #1018
Conversation
|
nadeem-R17 is not a collaborator of the repo |
| @@ -62,7 +62,9 @@ export const ConfirmationModal = ({ | |||
| } | |||
| {...props} | |||
| > | |||
| {children} | |||
| <div style={{ minWidth: '480px' }}> | |||
There was a problem hiding this comment.
This is problematic, if the screen size is lower than 480px.
There was a problem hiding this comment.
Thank you for bringing that to my attention. I've addressed the issue by implementing an adjustable minWidth for the content, taking into consideration screen sizes lower than 480px. If you have any further suggestions or if additional changes are needed, please feel free to let me know.
ConfirmationModal.-.Docs.Storybook.-.Google.Chrome.2024-01-22.11-04-04.mp4
Fixed confirmation modal width size issue
| @@ -43,6 +43,25 @@ export const ConfirmationModal = ({ | |||
| onConfirm, | |||
| ...props | |||
| }: Props): ReactElement => { | |||
| const [minWidth, setMinWidth] = useState("480px"); | |||
| useEffect(() => { | |||
There was a problem hiding this comment.
Thanks for the suggestion @nadeem-R17, but this seems a bit too complex and arbitrary solution for a styling issue.
It seems that it would need to be addressed in Vanilla CSS framework (that is the source of the styles), rather then programatically in React code.
So a Vanilla CSS modal component would need to define min width, respecting different screen size breakpoints supported by Vanilla, or possibly utilising modern min() function in CSS.
|
Thanks for your proposal @nadeem-R17, but we need to address it differently. |
Done
Fixes
Fixes: canonical/vanilla-framework#5359 .
ConfirmationModal.-.Docs.Storybook.mp4