fix(Drawer,Flyout): alignment

packages/gamut/src/Drawer/index.tsx

@@ -12,11 +12,17 @@ export interface DrawerProps extends Omit<BoxProps, 'width'> {
    * Whether the drawer should be open.
    */
   expanded?: boolean;
+
+  /**
+   * Which edge of the drawer content container is aligned to during the animation.
+   */
+  alignContentContainer?: 'left' | 'right';
 }
 
 export const Drawer: React.FC<DrawerProps> = ({
   children,
   expanded,
+  alignContentContainer = 'right',
   ...props
 }) => {
   const isDesktop = useMedia(`(min-width: ${breakpoints.sm})`);
@@ -31,18 +37,19 @@ export const Drawer: React.FC<DrawerProps> = ({
           bg="background-current"
           exit={{ width: 0 }}
           initial={{ width: 0 }}
-          overflowX="hidden"
-          overflowY="auto"
+          overflow="clip"
           position="relative"
           transition={{ duration: timingValues.slow / 1000 }}
           {...props}
         >
           <Box
             height="100%"
-            left="0"
+            {...{ [alignContentContainer]: 0 }}
             position="absolute"
             maxWidth="100%"
             minWidth={fullWidth}
+            overflowY="auto"
+            overflowX="hidden"
           >
             {children}
           </Box>

packages/gamut/src/Flyout/index.tsx

@@ -61,6 +61,7 @@ export const Flyout: React.FC<FlyoutProps> = ({
           flexDirection={openFrom === 'left' ? 'row' : 'row-reverse'}
           position="fixed"
           top={0}
+          alignContentContainer={openFrom === 'left' ? 'right' : 'left'}
           {...{ [openFrom]: 0 }}
         >
           <FlexBox

packages/gamut/src/Popover/Popover.tsx

@@ -24,7 +24,20 @@ const findScrollingParent = ({
     ) {
       return parentElement;
     }
-    return findScrollingParent(parentElement);
+    return findScrollingParent(parentElement); // parent of this parent is used via prop destructure
+  }
+  return null;
+};
+
+const findResizingParent = ({
+  parentElement,
+}: HTMLElement): HTMLElement | null => {
+  if (parentElement) {
+    const { overflow, overflowY, overflowX } = getComputedStyle(parentElement);
+    if ([overflow, overflowY, overflowX].some((val) => val === 'clip')) {
+      return parentElement;
+    }
+    return findResizingParent(parentElement); // parent of this parent is used via prop destructure
   }
   return null;
 };
@@ -92,6 +105,23 @@ export const Popover: React.FC<PopoverProps> = ({
     return () => scrollingParent.removeEventListener('scroll', handler);
   }, [targetRef]);
 
+  useEffect(() => {
+    // handles movement of target within a clipped container e.g. Drawer
+    if (!targetRef.current || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+    const resizingParent = findResizingParent(targetRef.current as HTMLElement);
+    if (!resizingParent?.addEventListener) {
+      return;
+    }
+    const handler = () => {
+      setTargetRect(targetRef?.current?.getBoundingClientRect());
+    };
+    const ro = new ResizeObserver(handler);
+    ro.observe(resizingParent);
+    return () => ro.unobserve(resizingParent);
+  }, [targetRef]);
+
   useEffect(() => {
     if (targetRect) {
       const inView =

packages/styleguide/stories/Atoms/Drawer.stories.mdx

@@ -27,11 +27,16 @@ Our Drawers are [controlled components](https://reactjs.org/docs/forms.html#cont
 
 <Canvas>
   <Story name="Drawer">
-    {() => {
+    {({ alignContentContainer }) => {
       const [expanded, setExpanded] = useState(false);
       return (
         <FlexBox bg="paleYellow" height="20rem">
-          <Drawer expanded={expanded}>Drawer content in here!</Drawer>
+          <Drawer
+            expanded={expanded}
+            alignContentContainer={alignContentContainer}
+          >
+            Drawer content in here!
+          </Drawer>
           <StrokeButton
             onClick={() => setExpanded((previousExpanded) => !previousExpanded)}
           >