gamut fix(Drawer,Flyout): alignment

fix(Drawer,Flyout): alignment

Open jrood opened this issue 7 months ago • 2 comments

Overview

This PR fixes a layout issue where flyout content had been rendering slightly shifted to the left in certain cases. This is a complex issue having to do with the fact that overflow="hidden" in the Drawer component causes reflow during the animation, specifically when it occurs within the fixed Flyout component.

The Drawer component currently animates the width of a parent wrapper, while holding content in a child wrapper. The main fix is to use overflow="clip" (which does not cause reflow) rather than overflow="hidden" on the parent wrapper, and to move overflowY scrolling to the child wrapper.

Example of how this fixes the unintended layout shift in mobile catalog menus:

before	after

Note, in before, the issue is not a 2px right-margin, but rather that the entire content is shifted left so that it would be slightly cutoff if there was not already left margin.

An additional fix included here is to ensure content is aligned opposite of the openFrom side. During an animation, content coming from the left should be aligned to the right (as it moves with the parent wrapper's moving right edge). Conversely, content from the right should be aligned to the left.

(I apologize in advance for any dizziness invoked by the ternary expression: 'left' ? 'right' : 'left'.)

A resize observer was added to popover to ensure that the tooltip for the close button does not get lost in the animation. This means that the tooltip will (correctly) show in some places where it doesn't currently in prod.

Screenshot 2024-08-01 at 5 25 12 PM Screenshot 2024-08-01 at 5 24 50 PM

However there is a plan to remove this automatic focus soon.

Fix alignment of drawer and flyout.

PR Checklist

[ ] ~Related to designs:~
[x] Related to JIRA ticket: DOT-386
[x] I have run this code to verify it works
[ ] ~This PR includes unit tests for the code change~
[x] This PR includes testing instructions tests for the code change
[x] The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories