fix: Fix popover positioning inside query containers (#3469)

Author: avinashbot

pages/popover/scenarios.page.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useState } from 'react';
+import clsx from 'clsx';
 
 import { Select } from '~components';
 import Box from '~components/box';
@@ -124,6 +125,20 @@ export default function () {
               With select
             </Popover>
           </section>
+
+          <section id="scenario-in-containment" className={clsx(styles.scenario, styles['containing-block'])}>
+            <Popover
+              position="left"
+              size="medium"
+              fixedWidth={true}
+              header="Network interface eth0"
+              content={<KeyValuePair />}
+              dismissAriaLabel="Close"
+              renderWithPortal={renderWithPortal}
+            >
+              eth0
+            </Popover>
+          </section>
         </SpaceBetween>
       </ScreenshotArea>
     </article>

pages/popover/scenarios.scss

@@ -7,3 +7,7 @@
   padding-inline: 0;
   text-align: center;
 }
+
+.containing-block {
+  contain: layout;
+}

src/internal/utils/dom.ts

@@ -10,7 +10,6 @@ export function isContainingBlock(element: HTMLElement): boolean {
   return (
     (!!computedStyle.transform && computedStyle.transform !== 'none') ||
     (!!computedStyle.perspective && computedStyle.perspective !== 'none') ||
-    (!!computedStyle.containerType && computedStyle.containerType !== 'normal') ||
     computedStyle.contain?.split(' ').some(s => ['layout', 'paint', 'strict', 'content'].includes(s))
   );
 }