From e4ab0223bccf81600640ef1c5894b0ce45f1fe07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 20 Mar 2022 22:48:20 +0000
Subject: [PATCH] fix(ui): tweak floating-ui dropdowns

---
 .../Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx  | 4 ++--
 .../Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx       | 4 ++--
 ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx          | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
index 19638e421..1e6649203 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
@@ -2,7 +2,7 @@ import { FC, Ref, CSSProperties, useRef, useState, useCallback } from "react";
 
 import { observer } from "mobx-react-lite";
 
-import { useFloating, shift, flip, offset } from "@floating-ui/react-dom";
+import { useFloating, shift, offset } from "@floating-ui/react-dom";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons/faCaretDown";
@@ -167,7 +167,7 @@ const AlertMenu: FC<{
 
     const { x, y, reference, floating, strategy } = useFloating({
       placement: "bottom-start",
-      middleware: [shift(), flip(), offset(5)],
+      middleware: [shift(), offset(5)],
     });
 
     return (
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
index 97ea1207f..e2c306651 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
@@ -2,7 +2,7 @@ import { FC, useRef, useState, useCallback, Ref, CSSProperties } from "react";
 
 import copy from "copy-to-clipboard";
 
-import { useFloating, shift, flip, offset } from "@floating-ui/react-dom";
+import { useFloating, shift, offset } from "@floating-ui/react-dom";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
@@ -166,7 +166,7 @@ const GroupMenu: FC<{
 
   const { x, y, reference, floating, strategy } = useFloating({
     placement: "bottom-start",
-    middleware: [shift(), flip(), offset(5)],
+    middleware: [shift(), offset(5)],
   });
 
   return (
diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
index 9c4c8136a..9e5d857c5 100644
--- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
+++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
@@ -9,7 +9,7 @@ import React, {
 
 import { observer } from "mobx-react-lite";
 
-import { useFloating, shift, flip, offset } from "@floating-ui/react-dom";
+import { useFloating, shift, offset } from "@floating-ui/react-dom";
 
 import type { OnChangeValue } from "react-select";
 import AsyncSelect from "react-select/async";
@@ -144,7 +144,7 @@ const GridLabelSelect: FC<{
 
   const { x, y, reference, floating, strategy } = useFloating({
     placement: "bottom",
-    middleware: [shift(), flip(), offset(5)],
+    middleware: [shift(), offset(5)],
   });
 
   return (