fix modal navigation bug (#4803)

voxel51 · Sep 16, 2024 · f8a900f · f8a900f
1 parent 71e926a
commit f8a900f
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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 (
     <ContentColumn>
-      <ModalNavigationContainer>
-        <ModalNavigation onNavigate={onNavigate} />
-      </ModalNavigationContainer>
       <ErrorBoundary onReset={() => {}}>
         <Suspense>
           {isGroup ? <Group /> : is3D ? <Sample3d /> : <Sample2D />}
@@ -88,13 +80,3 @@ export const ModalSample = React.memo(() => {
     </ContentColumn>
   );
 });
-
-const ModalNavigationContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-`;