feat(modals): changed StyledTooltipDialog's width from 400px to min(90vw, 400px)

[jgorfine-zendesk]

Description

During a recent Zendesk Help Center accessibility audit, it was revealed that the Permalink Tooltip Dialog doesn't shrink to fit within smaller viewports. This is a violation of WCAG 2.2 SC 1.4.10, Reflow, since it forces users to scroll both horizontally and vertically to engage with the Tooltip Dialog's content:

The CSS change in this PR could tide us over until greater time and consideration can be given to the Tooltip Dialog's responsive design.

Detail

Before

StyledTooltipDialog component has a fixed width of 400px. Its content gets cut off on small viewports.

After

StyledTooltipDialog component has a dynamic width, determined by the CSS min() function. The component will be 400px wide until the computed value of 90vw is less than 400px. This will allows content to be better accommodated within narrow viewports.

Checklist

• 👌 design updates will be Garden Designer approved (add the designer as a reviewer)
• 🌐 demo is up-to-date (npm start)
• ⬅️ renders as expected with reversed (RTL) direction
• ⚫ renders as expected in dark mode
• 🤘 renders as expected with Bedrock CSS (?bedrock)
• 💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
• ♿ tested for WCAG 2.2 AA accessibility compliance
• 📝 tested in Chrome, Firefox, Safari, and Edge

[jgorfine-zendesk]

It seems that the Tooltip's placement will also be a factor, here. For example: in the Tooltip instance I'm working with, I ended up needing to add the placement="start" prop to the Tooltip in order to preserve its arrow placement on narrower viewports. (This also meant I ended up using a smaller vw value than the 90 proposed here.)

Closing this PR in favor of a PR specific to my Tooltip instance.