From b47089cbe85de59fafe3b399629f9ef56a812b71 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Mon, 3 May 2021 12:00:51 +0100
Subject: [PATCH] fix(ui): resolve popper warnings

---
 ui/src/Common/Popper.ts                            | 14 ++++++++++++++
 .../Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx  |  2 +-
 .../AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx |  2 +-
 .../Components/Grid/AlertGrid/GridLabelSelect.tsx  |  2 +-
 ui/src/Components/NavBar/FilterInput/History.tsx   |  2 +-
 ui/src/Components/NavBar/FilterInput/index.tsx     |  2 +-
 6 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/ui/src/Common/Popper.ts b/ui/src/Common/Popper.ts
index 0aa541d35..599142a00 100644
--- a/ui/src/Common/Popper.ts
+++ b/ui/src/Common/Popper.ts
@@ -6,4 +6,18 @@ export const CommonPopperModifiers = [
       gpuAcceleration: false,
     },
   },
+  {
+    name: "offset",
+    options: {
+      offset: [0, 5],
+    },
+  },
+  {
+    name: "computeStyles",
+    options: {
+      gpuAcceleration: false,
+      adaptive: false,
+      roundOffsets: true,
+    },
+  },
 ];
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
index 25be7e1b5..9d9cb705b 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx
@@ -85,7 +85,7 @@ const MenuContent: FC<{
   return (
     <FetchPauser alertStore={alertStore}>
       <div
-        className="dropdown-menu d-block shadow"
+        className="dropdown-menu d-block shadow m-0"
         ref={popperRef}
         style={popperStyle}
         data-placement={popperPlacement}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
index f462286c0..9552aec0c 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
@@ -93,7 +93,7 @@ const MenuContent: FC<{
   return (
     <FetchPauser alertStore={alertStore}>
       <div
-        className="dropdown-menu d-block shadow"
+        className="dropdown-menu d-block shadow m-0"
         ref={popperRef}
         style={popperStyle}
         data-placement={popperPlacement}
diff --git a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
index f44ea5e7f..d753d25b6 100644
--- a/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
+++ b/ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx
@@ -127,7 +127,7 @@ const Dropdown: FC<{
 }) => {
   return (
     <div
-      className="dropdown-menu d-block shadow components-grid-label-select-menu border-0 p-0"
+      className="dropdown-menu d-block shadow components-grid-label-select-menu border-0 p-0 m-0"
       ref={popperRef}
       style={{
         fontSize: "1rem",
diff --git a/ui/src/Components/NavBar/FilterInput/History.tsx b/ui/src/Components/NavBar/FilterInput/History.tsx
index a631eae09..c83518166 100644
--- a/ui/src/Components/NavBar/FilterInput/History.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.tsx
@@ -90,7 +90,7 @@ const HistoryMenu: FC<{
 
   return (
     <div
-      className="dropdown-menu d-block shadow components-navbar-historymenu"
+      className="dropdown-menu d-block shadow components-navbar-historymenu m-0"
       ref={popperRef}
       style={popperStyle}
       data-placement={popperPlacement}
diff --git a/ui/src/Components/NavBar/FilterInput/index.tsx b/ui/src/Components/NavBar/FilterInput/index.tsx
index 55691e0db..1efd3faef 100644
--- a/ui/src/Components/NavBar/FilterInput/index.tsx
+++ b/ui/src/Components/NavBar/FilterInput/index.tsx
@@ -172,7 +172,7 @@ const FilterInput: FC<{
           </div>
           <span className="dropdown" {...getMenuProps()}>
             {isOpen && inputValue && suggestions.length ? (
-              <div className="dropdown-menu show shadow">
+              <div className="dropdown-menu show shadow m-0">
                 {suggestions.slice(0, 10).map((item, index) => (
                   <li
                     className={`dropdown-item cursor-pointer ${