[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:
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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user