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

[evansjohnson]

Fixes no existing issue: https://github.com/palantir/blueprint/issues?q=is%3Aissue+is%3Aopen+toast

Checklist

• [-] Includes tests
• [-] Update documentation

I could try to update the tests to avoid regressing but think this may be pretty hard to test for, particularly given how long this went without being a big issue

Changes proposed in this pull request:

Modify toast "max-width" to be the minimum of page width - 20px and 500px, rather than the max width always being 500px which may exceed the screen size, particularly on mobile devices.

Reviewers should focus on:

any concerns/ possible negative impact from this change

Screenshot

this PR

layout gets messed up but I think this is an improvement over current behavior, particularly for toasts that don't have an action button

current

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?

• feature: A new feature of the service.
• improvement: An incremental improvement in the functionality or operation of the service.
• fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
• break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
  and external consumers of the service's API (e.g. customer-written software or integrations).
• deprecation: Advertises the intention to remove service functionality without any change to the
  operation of the service itself.
• manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
  performing database surgery, ...) at the time of upgrade for it to succeed.
• migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?

• ❗The break and manual task changelog types will result in a major release!
• 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
• ✨ All others will result in a minor version release.

Type

• Feature
• Improvement
• Fix
• Break
• Deprecation
• Manual task
• Migration

Description

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

Check the box to generate changelog(s)

• Generate changelog entry

[svc-palantir-github]

Make sure toast max width doesnt exceed screen size on mobile devices

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[evansjohnson]

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

[evansjohnson]

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...)

[svc-palantir-github]

Update packages/core/src/components/toast/_toast.scss

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ggdouglas]

Is there a way we can we leverage the existing padding on the Overlay surrounding Toasts vs. hardcoding a calc(100vw - $toast-margin) in like this? The 20px side padding that the overlay container provides seems like the appropriate amount to account for a toast on a mobile device.

[ggdouglas]

LGTM!

[svc-palantir-github]

Update packages/core/src/components/toast/_toast.scss

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[evansjohnson]

leverage the existing padding on the Overlay surrounding Toasts

good call! this toast margin has nothing to do with space outside the toast right now so no good reason I'm using that. it looks like just setting it to 100% does the trick.

of course if you add a button and have a really small screen size things start to look a bit silly but I think this is still a directionally a good change. to take this further we could wrap the text and action button in it's own flex wrapper and set flex-direction: column

Invalidated by push of 33cc203

[svc-palantir-github]

Update packages/core/src/components/toast/_toast.scss

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.