fix: adjust Popover styles to avoid horizontal scroll on body (#45414)

frontend/src/metabase/components/MetadataInfo/Popover/Popover.styled.tsx

@@ -11,13 +11,10 @@ export const Dropdown = styled(HoverCard.Dropdown)`
   overflow: visible;
 `;
 
-export const Target = styled.div`
+export const HackyInvisibleTargetFiller = styled.div`
   position: absolute;
-  width: calc(100% + 20px);
-  left: -10px;
-  right: -10px;
+  width: 100%;
   top: -10px;
-  bottom: -10px;
   min-height: 5px;
   z-index: -1;
 `;

frontend/src/metabase/components/MetadataInfo/Popover/Popover.tsx

@@ -8,7 +8,11 @@ import { HoverCard, useDelayGroup } from "metabase/ui";
 export const POPOVER_DELAY: [number, number] = [250, 150];
 export const POPOVER_TRANSITION_DURATION = 150;
 
-import { WidthBound, Dropdown, Target } from "./Popover.styled";
+import {
+  WidthBound,
+  Dropdown,
+  HackyInvisibleTargetFiller,
+} from "./Popover.styled";
 
 // When switching to another hover target in the same delay group,
 // we don't close immediately but delay by a short amount to avoid flicker.
@@ -73,7 +77,7 @@ export function Popover({
       >
         {/* HACK: adds an element between the target and the card */}
         {/* to avoid the card from disappearing */}
-        <Target />
+        <HackyInvisibleTargetFiller />
         <WidthBound
           width={width}
           ref={node => {

frontend/src/metabase/visualizations/components/TableInteractive/TableInteractive.jsx

@@ -903,7 +903,7 @@ class TableInteractive extends Component {
           }
         >
           <QueryColumnInfoPopover
-            placement="bottom-start"
+            position="bottom-start"
             query={query}
             stageIndex={-1}
             column={query && Lib.fromLegacyColumn(query, stageIndex, column)}