fix(Drawer): add max width to prevent width overflow for small screens #42914
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
💡 Background and solution
<Drawer />
component like<Modal />
accepts width, however unlike modal it does not havemax-width
for cases when screen width is lower than drawer width.This pull request set the
max-width
to100%
for drawer wrapper in drawer styles file.The result will be:
![Screenshot from 2023-06-07 23-52-13](https://private-user-images.githubusercontent.com/64708228/244188330-c5a3624a-3221-449c-8e46-ce3004eb7efd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkyMjI5NjcsIm5iZiI6MTczOTIyMjY2NywicGF0aCI6Ii82NDcwODIyOC8yNDQxODgzMzAtYzVhMzYyNGEtMzIyMS00NDljLThlNDYtY2UzMDA0ZWI3ZWZkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjEwVDIxMjQyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWI1NDZlMDI4NDIyMWI3ZDdmZGYyYTE1YzJlMGJhNmEzM2Q4NTk2YjlkMjAwNTQ0MTQ3YWUxYjFmYTE3NDFjZGUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.IFcP_0BFLgu3sPf-kiDbAPetlSSo1nT2sAqxmLBtBkY)
🚀 Summary
🤖 Generated by Copilot at 00d404b
Fix drawer overflow bug on small devices by adding
maxWidth
to drawer style. Updatecomponents/drawer/style/index.ts
to implement this change.🔍 Walkthrough
🤖 Generated by Copilot at 00d404b
maxWidth
property to drawer style to prevent overflow on small screens (link)