[WIP] # 223 Changes to facilitate merge with "Fix dock height #296"

With these changes, the menu no longer appears in Platform.Bible app.

Author: tombogle

src/renderer/app.component.css

@@ -18,6 +18,8 @@ body {
 #root {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 li {

src/renderer/app.component.tsx

@@ -1,11 +1,22 @@
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import './app.component.css';
+import { ScriptureReference } from 'papi-components';
 import ParanextDockLayout from '@renderer/components/docking/paranext-dock-layout.component';
 import TestContext from '@renderer/context/papi-context/test.context';
+import { useState } from 'react';
+import PlatformBibleToolbar from './components/platform-bible-toolbar';
+
+
+function Main() {
+  const [scrRef, setScrRef] = useState({ book: 40, chapter: 1, verse: 1 });
+
+  const handleReferenceChanged = (newScrRef: ScriptureReference) => {
+    setScrRef(newScrRef);
+  };
 
-function Hello() {
   return (
     <TestContext.Provider value="test">
+      <PlatformBibleToolbar referenceChanged={handleReferenceChanged} scrRef={scrRef} />
       <ParanextDockLayout />
     </TestContext.Provider>
   );
@@ -15,7 +26,7 @@ export default function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<Hello />} />
+        <Route path="/" element={<Main />} />
       </Routes>
     </Router>
   );

src/renderer/components/docking/paranext-dock-layout.component.css

@@ -1,8 +1,6 @@
 .dock-layout {
-  width: calc(100% - 8px);
-  height: calc(100% - 8px);
-  margin-left: 4px;
-  margin-top: 4px;
+  flex-grow: 1;
+  margin: 4px;
 }
 
 .dock-layout .dock-panel.dock-style-paranext {

src/renderer/components/docking/paranext-dock-layout.component.tsx

@@ -1,6 +1,6 @@
 import 'rc-dock/dist/rc-dock.css';
 import './paranext-dock-layout.component.css';
-import { useRef, useEffect, useState } from 'react';
+import { useRef, useEffect } from 'react';
 import DockLayout, {
   BoxData,
   FloatPosition,
@@ -41,8 +41,6 @@ import {
   saveTabInfoBase,
 } from '@shared/services/web-view.service';
 import { getErrorMessage } from '@shared/utils/util';
-import { ScriptureReference } from 'papi-components';
-import PlatformBibleToolbar from '../platform-bible-toolbar';
 
 type TabType = string;
 
@@ -274,8 +272,6 @@ export function addWebViewToDock(webView: WebViewProps, layout: Layout, dockLayo
 // #endregion
 
 export default function ParanextDockLayout() {
-  const [scrRef, setScrRef] = useState({ book: 40, chapter: 1, verse: 1 });
-
   // This ref will always be defined
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const dockLayoutRef = useRef<DockLayout>(null!);
@@ -303,24 +299,17 @@ export default function ParanextDockLayout() {
     // Is there any situation where dockLayoutRef will change? We need to add to dependencies if so
   }, []);
 
-  const handleReferenceChanged = (newScrRef: ScriptureReference) => {
-    setScrRef(newScrRef);
-  };
-
   return (
-    <>
-      <PlatformBibleToolbar referenceChanged={handleReferenceChanged} scrRef={scrRef}/>
-      <DockLayout
-        ref={dockLayoutRef}
-        groups={groups}
-        defaultLayout={{ dockbox: { mode: 'horizontal', children: [] } }}
-        dropMode="edge"
-        loadTab={loadTab}
-        saveTab={saveTab}
-        onLayoutChange={(...args) => {
-          if (onLayoutChangeRef.current) onLayoutChangeRef.current(...args);
-        }}
-      />
-    </>
+    <DockLayout
+      ref={dockLayoutRef}
+      groups={groups}
+      defaultLayout={{ dockbox: { mode: 'horizontal', children: [] } }}
+      dropMode="edge"
+      loadTab={loadTab}
+      saveTab={saveTab}
+      onLayoutChange={(...args) => {
+        if (onLayoutChangeRef.current) onLayoutChangeRef.current(...args);
+      }}
+    />
   );
 }