fix: Remove additional Editor scroll

theopensystemslab · Sep 27, 2024 · 3e2ae25 · 3e2ae25
1 parent d7edbd0
commit 3e2ae25
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 14 deletions.
diff --git a/editor.planx.uk/.eslintrc b/editor.planx.uk/.eslintrc
@@ -5,15 +5,13 @@
     "react-hooks",
     "simple-import-sort",
     "jsx-a11y",
-    "testing-library",
-    "jest"
+    "testing-library"
   ],
   "extends": [
     "eslint:recommended",
     "plugin:jsx-a11y/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:jest/recommended"
+    "prettier"
   ],
   "rules": {
     "react-hooks/rules-of-hooks": "error",
@@ -89,11 +87,6 @@
     ],
     "no-nested-ternary": "error"
   },
-  "settings": {
-    "jest": {
-      "version": 27
-    }
-  },
   "overrides": [
     {
       "files": [

diff --git a/editor.planx.uk/src/components/TestEnvironmentBanner.tsx b/editor.planx.uk/src/components/TestEnvironmentBanner.tsx
@@ -8,12 +8,15 @@ import { visuallyHidden } from "@mui/utils";
 import { useStore } from "pages/FlowEditor/lib/store";
 import React from "react";
 
+import { HEADER_HEIGHT_EDITOR } from "./Header";
+
 const TestEnvironmentWarning = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   color: theme.palette.text.primary,
   justifyContent: "space-between",
   alignItems: "center",
   padding: "0.2em 0",
+  minHeight: HEADER_HEIGHT_EDITOR,
 }));
 
 const TestEnvironmentBanner: React.FC = () => {

diff --git a/editor.planx.uk/src/pages/FlowEditor/index.tsx b/editor.planx.uk/src/pages/FlowEditor/index.tsx
@@ -11,12 +11,16 @@ import Sidebar from "./components/Sidebar";
 import { useStore } from "./lib/store";
 import useScrollControlsAndRememberPosition from "./lib/useScrollControlsAndRememberPosition";
 
-const EditorContainer = styled(Box)(() => ({
+const EditorContainer = styled(Box, {
+  shouldForwardProp: (prop) => prop !== "isTestEnvBannerVisible",
+})<{ isTestEnvBannerVisible?: boolean }>(({ isTestEnvBannerVisible }) => ({
   display: "flex",
   alignItems: "stretch",
   overflow: "hidden",
   flexGrow: 1,
-  maxHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
+  maxHeight: isTestEnvBannerVisible
+    ? `calc(100vh - ${HEADER_HEIGHT_EDITOR * 2}px)`
+    : `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
 }));
 
 const FlowEditor = () => {
@@ -27,8 +31,15 @@ const FlowEditor = () => {
   useScrollControlsAndRememberPosition(scrollContainerRef);
   const showSidebar = useStore((state) => state.showSidebar);
 
+  const isTestEnvBannerVisible = useStore(
+    (state) => state.isTestEnvBannerVisible,
+  );
+
   return (
-    <EditorContainer id="editor-container">
+    <EditorContainer
+      id="editor-container"
+      isTestEnvBannerVisible={isTestEnvBannerVisible}
+    >
       <Box
         sx={{
           display: "flex",

diff --git a/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx b/editor.planx.uk/src/pages/layout/AuthenticatedLayout.tsx
@@ -2,7 +2,6 @@ import Box from "@mui/material/Box";
 import { containerClasses } from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import EditorNavMenu from "components/EditorNavMenu";
-import { HEADER_HEIGHT_EDITOR } from "components/Header";
 import RouteLoadingIndicator from "components/RouteLoadingIndicator";
 import React, { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
@@ -23,7 +22,6 @@ const DashboardContainer = styled(Box)(({ theme }) => ({
   display: "flex",
   flexDirection: "row",
   width: "100%",
-  minHeight: `calc(100vh - ${HEADER_HEIGHT_EDITOR}px)`,
   overflow: "hidden",
   [`& > .${containerClasses.root}`]: {
     paddingTop: theme.spacing(3),