Merge pull request #1668 from visualize-admin/fix/menu-alignment

fix: Menu alignment
visualize-admin · Jul 22, 2024 · 12ab7be · 12ab7be
2 parents 386186e + 8652538
commit 12ab7be
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 27 deletions.
diff --git a/app/components/arrow-menu.tsx b/app/components/arrow-menu.tsx
@@ -1,41 +1,48 @@
 import { Menu, paperClasses, styled } from "@mui/material";
 
-export const ArrowMenuTopBottom = styled(Menu)(({ theme }) => ({
+const commonBeforeStyles: Partial<CSSStyleDeclaration> = {
+  content: '" "',
+  display: "block",
+  background: "white",
+  width: "10px",
+  height: "10px",
+  transform: "rotate(45deg)",
+  position: "absolute",
+  margin: "auto",
+};
+
+export const ArrowMenuTopCenter = styled(Menu)({
+  [`& .${paperClasses.root}`]: {
+    overflow: "visible",
+    "&:before": {
+      ...commonBeforeStyles,
+      top: -5,
+      left: "0%",
+      right: 0,
+    },
+  },
+});
+
+export const ArrowMenuTopBottom = styled(Menu)({
   [`& .${paperClasses.root}`]: {
-    overflowY: "visible",
-    overflowX: "visible",
+    overflow: "visible",
     "&:before": {
-      content: '" "',
-      display: "block",
-      background: theme.palette.background.paper,
-      width: 10,
-      height: 10,
-      transform: "rotate(45deg)",
-      position: "absolute",
-      margin: "auto",
+      ...commonBeforeStyles,
       top: -5,
       left: "calc(100% - 40px)",
       right: 0,
     },
   },
-}));
+});
 
-export const ArrowMenuBottomTop = styled(Menu)(({ theme }) => ({
+export const ArrowMenuBottomTop = styled(Menu)({
   [`& .${paperClasses.root}`]: {
-    overflowY: "visible",
-    overflowX: "visible",
+    overflow: "visible",
     "&:before": {
-      content: '" "',
-      display: "block",
-      background: theme.palette.background.paper,
-      width: 10,
-      height: 10,
-      transform: "rotate(45deg)",
-      position: "absolute",
-      margin: "auto",
+      ...commonBeforeStyles,
       bottom: -5,
       left: 0,
       right: "calc(100% - 40px)",
     },
   },
-}));
+});
diff --git a/app/components/chart-selection-tabs.tsx b/app/components/chart-selection-tabs.tsx
@@ -25,7 +25,7 @@ import { useClient } from "urql";
 import { useDebounce } from "use-debounce";
 
 import { extractChartConfigComponentIris } from "@/charts/shared/chart-helpers";
-import { ArrowMenuTopBottom } from "@/components/arrow-menu";
+import { ArrowMenuTopCenter } from "@/components/arrow-menu";
 import { DuplicateChartMenuActionItem } from "@/components/chart-shared";
 import Flex from "@/components/flex";
 import { MenuActionItem } from "@/components/menu-action-item";
@@ -276,7 +276,7 @@ const TabsEditable = (props: TabsEditableProps) => {
       ) : null}
 
       {tabsState.popoverType === "edit" ? (
-        <ArrowMenuTopBottom
+        <ArrowMenuTopCenter
           id="chart-selection-popover"
           open={tabsState.popoverOpen}
           anchorEl={popoverAnchorEl}
@@ -322,7 +322,7 @@ const TabsEditable = (props: TabsEditableProps) => {
               }}
             />
           )}
-        </ArrowMenuTopBottom>
+        </ArrowMenuTopCenter>
       ) : null}
     </>
   );