Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make sure toast max width doesn't exceed screen size on mobile devices #6959

Merged
merged 5 commits into from
Sep 16, 2024
Merged

Make sure toast max width doesn't exceed screen size on mobile devices #6959

Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
eb07b3b
Make sure toast max width doesnt exceed screen size on mobile devices
evansjohnson Sep 3, 2024
302a566
Update packages/core/src/components/toast/_toast.scss
evansjohnson Sep 10, 2024
6795289
Update packages/core/src/components/toast/_toast.scss
evansjohnson Sep 12, 2024
33cc203
Update packages/core/src/components/toast/_toast.scss
evansjohnson Sep 12, 2024
2dba254
Update packages/core/src/components/toast/_toast.scss
evansjohnson Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/core/src/components/toast/_toast.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ $toast-intent-colors: (
box-shadow: $pt-toast-box-shadow;
display: flex;
margin: $toast-margin 0 0;
max-width: $toast-max-width;
min-width: $toast-min-width;
max-width: min($toast-max-width, calc(100vw - $toast-margin));
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

probably should handle considering $toast-min-width here as well 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

from https://www.w3.org/TR/CSS21/visudet.html#min-max-widths

The following algorithm describes how the two properties influence the used value of the 'width' property:
The tentative used width is calculated (without 'min-width' and 'max-width') following the rules under "Calculating widths and margins" above.
If the tentative used width is greater than 'max-width', the rules above are applied again, but this time using the computed value of 'max-width' as the computed value for 'width'.
If the resulting width is smaller than 'min-width', the rules above are applied again, but this time using the value of 'min-width' as the computed value for 'width'.

so I guess I should do something similar to this for the min-width field as well (though we're propobably safe with 300px...)

min-width: max($toast-min-width, calc(100vw - $toast-margin));
evansjohnson marked this conversation as resolved.
Show resolved Hide resolved

// toast is interactive even though container isn't
pointer-events: all;
Expand Down