From e7b3c94b2bbdf598c900ade496ac1cd02fd1c85c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dafydd=20Ll=C5=B7r=20Pearson?= <DafyddLlyr@gmail.com>
Date: Mon, 30 Sep 2024 08:27:50 +0100
Subject: [PATCH] fix: Remove additional Editor scroll (#3734)

---
 editor.planx.uk/.eslintrc                       | 11 ++---------
 .../src/components/TestEnvironmentBanner.tsx    |  3 +++
 editor.planx.uk/src/pages/FlowEditor/index.tsx  | 17 ++++++++++++++---
 .../src/pages/layout/AuthenticatedLayout.tsx    |  2 --
 4 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/editor.planx.uk/.eslintrc b/editor.planx.uk/.eslintrc
index ff48a856e5..6b6e104b8f 100644
--- 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
index 6f04950c78..3c075169be 100644
--- 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
index 9e580d5800..7524b59e3c 100644
--- 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
index 6f93190696..2fdd596a7d 100644
--- 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),