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

---
 ui/src/Components/NavBar/FilterInput/History.tsx | 8 +-------
 ui/src/Components/NavBar/index.stories.tsx       | 1 -
 ui/src/Styles/Components/_History.scss           | 1 +
 3 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/ui/src/Components/NavBar/FilterInput/History.tsx b/ui/src/Components/NavBar/FilterInput/History.tsx
index 83f1b4b52..5e95ed111 100644
--- a/ui/src/Components/NavBar/FilterInput/History.tsx
+++ b/ui/src/Components/NavBar/FilterInput/History.tsx
@@ -72,7 +72,6 @@ const HistoryMenu: FC<{
   y: number | null;
   floating: Ref<HTMLDivElement> | null;
   strategy: CSSProperties["position"];
-  maxWidth: number | null;
   maxHeight: number | null;
   filters: ReduceFilterT[][];
   alertStore: AlertStore;
@@ -84,7 +83,6 @@ const HistoryMenu: FC<{
   y,
   floating,
   strategy,
-  maxWidth,
   maxHeight,
   filters,
   alertStore,
@@ -102,7 +100,6 @@ const HistoryMenu: FC<{
         position: strategy,
         top: y ?? "",
         left: x ?? "",
-        maxWidth: maxWidth ?? "",
         maxHeight: maxHeight ?? "",
       }}
     >
@@ -195,7 +192,6 @@ const History: FC<{
   // this will be dumped to local storage via mobx-stored
   const [history] = useState<HistoryStorage>(new HistoryStorage());
   const [isVisible, setIsVisible] = useState<boolean>(false);
-  const [maxWidth, setMaxWidth] = useState<number | null>(null);
   const [maxHeight, setMaxHeight] = useState<number | null>(null);
   const hide = useCallback(() => setIsVisible(false), []);
   const toggle = useCallback(() => setIsVisible(!isVisible), [isVisible]);
@@ -207,8 +203,7 @@ const History: FC<{
       flip(),
       offset(5),
       size({
-        apply({ width, height }) {
-          setMaxWidth(width);
+        apply({ height }) {
           setMaxHeight(height);
         },
       }),
@@ -279,7 +274,6 @@ const History: FC<{
           y={y}
           floating={floating}
           strategy={strategy}
-          maxWidth={maxWidth}
           maxHeight={maxHeight}
         />
       </DropdownSlide>
diff --git a/ui/src/Components/NavBar/index.stories.tsx b/ui/src/Components/NavBar/index.stories.tsx
index e2909267b..398960625 100644
--- a/ui/src/Components/NavBar/index.stories.tsx
+++ b/ui/src/Components/NavBar/index.stories.tsx
@@ -176,7 +176,6 @@ storiesOf("NavBar", module).add("NavBar", () => {
         y={0}
         floating={null}
         strategy={"absolute"}
-        maxWidth={null}
         maxHeight={null}
         filters={history}
         onClear={() => {}}
diff --git a/ui/src/Styles/Components/_History.scss b/ui/src/Styles/Components/_History.scss
index ec8142446..6fc185dda 100644
--- a/ui/src/Styles/Components/_History.scss
+++ b/ui/src/Styles/Components/_History.scss
@@ -1,6 +1,7 @@
 .dropdown-menu.components-navbar-historymenu {
   white-space: nowrap;
   overflow: scroll;
+  width: 100%;
 }
 
 .dropdown-menu.components-navbar-historymenu > .dropdown-item {