diff --git a/app/packages/core/src/components/Modal/Modal.tsx b/app/packages/core/src/components/Modal/Modal.tsx index db3b97e03b..c7c2b196cf 100644 --- a/app/packages/core/src/components/Modal/Modal.tsx +++ b/app/packages/core/src/components/Modal/Modal.tsx @@ -9,6 +9,7 @@ import { ModalActionsRow } from "../Actions"; import Sidebar from "../Sidebar"; import { useLookerHelpers } from "./hooks"; import { modalContext } from "./modal-context"; +import ModalNavigation from "./ModalNavigation"; import { ModalSpace } from "./ModalSpace"; import { TooltipInfo } from "./TooltipInfo"; import { useModalSidebarRenderEntry } from "./use-sidebar-render-entry"; @@ -163,6 +164,8 @@ const Modal = () => { const isFullScreen = useRecoilValue(fos.fullscreen); + const { onNavigate } = useLookerHelpers(); + const screenParams = useMemo(() => { return isFullScreen ? { width: "100%", height: "100%" } diff --git a/app/packages/core/src/components/Modal/ModalNavigation.tsx b/app/packages/core/src/components/Modal/ModalNavigation.tsx index 94f2441ada..2c2ca9012c 100644 --- a/app/packages/core/src/components/Modal/ModalNavigation.tsx +++ b/app/packages/core/src/components/Modal/ModalNavigation.tsx @@ -26,7 +26,7 @@ const Arrow = styled.span<{ left: ${(props) => (props.$isRight ? "initial" : "0.75rem")}; z-index: 99999; padding: 0.75rem; - bottom: 50%; + bottom: 33vh; width: 3rem; height: 3rem; background-color: var(--fo-palette-background-button); diff --git a/app/packages/core/src/components/Modal/ModalSamplePlugin.tsx b/app/packages/core/src/components/Modal/ModalSamplePlugin.tsx index b848024881..249285433f 100644 --- a/app/packages/core/src/components/Modal/ModalSamplePlugin.tsx +++ b/app/packages/core/src/components/Modal/ModalSamplePlugin.tsx @@ -4,10 +4,9 @@ import React, { Suspense, useEffect } from "react"; import { useRecoilCallback, useRecoilValue, useSetRecoilState } from "recoil"; import styled from "styled-components"; import Group from "./Group"; -import { useLookerHelpers, useModalContext } from "./hooks"; +import { useModalContext } from "./hooks"; import { Sample2D } from "./Sample2D"; import { Sample3d } from "./Sample3d"; -import ModalNavigation from "./ModalNavigation"; const ContentColumn = styled.div` display: flex; @@ -28,10 +27,6 @@ export const ModalSample = React.memo(() => { const setIsTooltipLocked = useSetRecoilState(fos.isTooltipLocked); const setTooltipDetail = useSetRecoilState(fos.tooltipDetail); - const sidebarwidth = useRecoilValue(fos.sidebarWidth(true)); - const isSidebarVisible = useRecoilValue(fos.sidebarVisible(true)); - const { onNavigate } = useLookerHelpers(); - const tooltipEventHandler = useRecoilCallback( ({ snapshot, set }) => (e) => { @@ -77,9 +72,6 @@ export const ModalSample = React.memo(() => { return ( - - - {}}> {isGroup ? : is3D ? : } @@ -88,13 +80,3 @@ export const ModalSample = React.memo(() => { ); }); - -const ModalNavigationContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - width: 100%; - height: 100%; - position: absolute; - left: 0; -`;