[v9.3.x] Prometheus: Fix exemplar popover overflow (#60722)

Prometheus: Fix exemplar popover overflow (#60189)

Add popover modifiers to fix overflow issue

(cherry picked from commit 76e822af39)

Co-authored-by: ismail simsek <ismailsimsek09@gmail.com>
This commit is contained in:
Grot (@grafanabot)
2022-12-23 10:50:58 +01:00
committed by GitHub
co-authored by ismail simsek
parent 510345aad1
commit 8de24779ad
@@ -37,7 +37,22 @@ export const ExemplarMarker: React.FC<ExemplarMarkerProps> = ({
const [isOpen, setIsOpen] = useState(false);
const [markerElement, setMarkerElement] = React.useState<HTMLDivElement | null>(null);
const [popperElement, setPopperElement] = React.useState<HTMLDivElement | null>(null);
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement);
const { styles: popperStyles, attributes } = usePopper(markerElement, popperElement, {
modifiers: [
{
name: 'preventOverflow',
options: {
altAxis: true,
},
},
{
name: 'flip',
options: {
fallbackPlacements: ['top', 'left-start'],
},
},
],
});
const popoverRenderTimeout = useRef<NodeJS.Timer>();
const getSymbol = () => {