diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css index edc75aa2..6bc51dff 100644 --- a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css +++ b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.css @@ -19,10 +19,6 @@ padding-top: 8px; } -.WebvizViewList__Below { - margin-left: -151px; -} - .WebvizViewList__Aside { margin-top: -20px; } diff --git a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx index 2acd9e59..d40c723d 100644 --- a/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx +++ b/react/src/lib/components/WebvizSettingsDrawer/components/ViewList/view-list.tsx @@ -30,13 +30,17 @@ export const ViewList: React.FC = (props: ViewListProps) => { views: View[]; }[] >([]); + const ref = React.useRef(null); React.useLayoutEffect(() => { if (props.anchorElement) { const rect = props.anchorElement.getBoundingClientRect(); if (props.location === "below") { setMainPosition({ - x: rect.left + rect.width / 2, + x: + rect.left + + rect.width / 2 - + (ref.current?.getBoundingClientRect().width || 0) / 2, y: rect.bottom + 20, }); } else { @@ -46,7 +50,7 @@ export const ViewList: React.FC = (props: ViewListProps) => { }); } } - }, [props.anchorElement]); + }, [props.anchorElement, props.location, ref.current]); React.useEffect(() => { const viewList: { @@ -84,6 +88,7 @@ export const ViewList: React.FC = (props: ViewListProps) => { top: mainPosition.y, display: props.open ? "block" : "none", }} + ref={ref} >
= ( props.open, store.state.activePluginId, store.state.pluginsData, + viewNameRef.current, + viewCarouselRef.current, ]); React.useEffect(() => { @@ -141,7 +143,7 @@ export const ViewSelector: React.FC = ( }} onClick={() => setMenuOpen(true)} > -
+