Fix: Manually Adjust Code Editor Width

src/App.tsx

@@ -2,20 +2,24 @@ import { createStore, StoreProvider } from 'easy-peasy';
 import EditorPane from './components/panes/EditorPane';
 import NavigationPane from './components/panes/NavigationPane';
 import WorkflowsPane from './components/panes/WorkflowsPane';
+import useWindowDimensions from './state/Hooks';
 import Store from './state/Store';
 
-// Workaround for https://github.com/ctrlplusb/easy-peasy/issues/741 
-// const StoreProviderOverride = StoreProvider as any;
-
 const App = () => {
+  const inspectorWidth = 320;
+  const appWidth = useWindowDimensions();
+
   return (
     <StoreProvider store={createStore(Store)}>
       <section className="flex flex-row h-full">
-        <section className="flex flex-col flex-nowrap flex-1">
+        <section
+          className="flex flex-col flex-nowrap flex-1"
+          style={{ width: appWidth.width - inspectorWidth }}
+        >
           <WorkflowsPane />
           <EditorPane />
         </section>
-        <NavigationPane />
+        <NavigationPane width={inspectorWidth} />
       </section>
     </StoreProvider>
   );

src/components/panes/EditorPane.tsx

@@ -26,6 +26,7 @@ const EditorPane = () => {
     return yml;
   };
 
+
   return (
     <div className="bg-circle-gray-900 h-2/5 w-full flex flex-col">
       <div className="border-b text-xl border-circle-gray-800 font-bold flex flex-row">
@@ -75,6 +76,7 @@ const EditorPane = () => {
         ) : (
           <Editor
             theme="vs-dark"
+            wrapperProps={{ className: 'flex-1 flex-grow' }}
             language="yaml"
             value={config && configYAML(config)}
           />

src/components/panes/NavigationPane.tsx

@@ -1,15 +1,22 @@
 import { useStoreState } from '../../state/Hooks';
 
+interface NavigationPaneProps {
+  width: number;
+}
+
 /**
  * @see
  * @returns
  */
-const NavigationPane = () => {
+const NavigationPane = ({ width }: NavigationPaneProps) => {
   const navigation = useStoreState((state) => state.navigation);
   const NavPage = navigation.component.Component;
 
   return (
-    <div className="h-full border-l border-circle-gray-300 w-80 pt-6 bg-white flex flex-col overflow-y-hidden">
+    <div
+      className="h-full border-l border-circle-gray-300 pt-6 bg-white flex flex-col overflow-y-hidden"
+      style={{ width }}
+    >
       <NavPage {...navigation.props} />
     </div>
   );

src/state/Hooks.tsx

@@ -1,8 +1,34 @@
 import { createTypedHooks } from 'easy-peasy';
+import { useEffect, useState } from 'react';
 import { StoreActions, StoreModel } from './Store';
 
 const typedHooks = createTypedHooks<StoreModel & StoreActions>();
 
 export const useStoreActions = typedHooks.useStoreActions;
 export const useStoreDispatch = typedHooks.useStoreDispatch;
 export const useStoreState = typedHooks.useStoreState;
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions(),
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}