From 6c55588d7abc6a4768b5e98574e28dc486fd964f Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Mon, 14 Mar 2022 12:39:42 -0500
Subject: [PATCH] app: fix layout

The explorer was getting pushed off of the screen when typing long lines
in the editor.
---
 src/app/App.tsx | 48 ++++++++++++++++++++++++------------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index c48d7c37..96b4d2c5 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -149,25 +149,25 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
     return (
         <div className="pb-app h-100 w-100 p-absolute">
             <Toolbar />
-            <SplitterLayout
-                customClassName={`pb-app-body ${
-                    showDocs ? 'pb-show-docs' : 'pb-hide-docs'
-                }`}
-                onDragStart={(): void => setIsDragging(true)}
-                onDragEnd={(): void => setIsDragging(false)}
-                percentage={true}
-                secondaryInitialSize={Number(
-                    localStorage.getItem('app-docs-split') || 30,
-                )}
-                onSecondaryPaneSizeChange={(value): void =>
-                    localStorage.setItem('app-docs-split', String(value))
-                }
+            <div
+                className="pb-app-body"
+                style={{ display: 'grid', gridTemplateColumns: '250px auto' }}
             >
-                <div className="h-100 w-100" style={{ display: 'flex' }}>
-                    <div style={{ display: 'inline-block', width: 250 }}>
-                        <Explorer />
-                    </div>
-                    <div style={{ display: 'inline-block' }}>
+                <Explorer />
+                {/* need a container for SplitterLayout since it uses position: absolute */}
+                <div>
+                    <SplitterLayout
+                        customClassName={showDocs ? 'pb-show-docs' : 'pb-hide-docs'}
+                        onDragStart={(): void => setIsDragging(true)}
+                        onDragEnd={(): void => setIsDragging(false)}
+                        percentage={true}
+                        secondaryInitialSize={Number(
+                            localStorage.getItem('app-docs-split') || 30,
+                        )}
+                        onSecondaryPaneSizeChange={(value): void =>
+                            localStorage.setItem('app-docs-split', String(value))
+                        }
+                    >
                         <SplitterLayout
                             vertical={true}
                             percentage={true}
@@ -193,13 +193,13 @@ const App: React.VoidFunctionComponent<AppProps> = ({ onEditorChanged }) => {
                                 <Terminal />
                             </div>
                         </SplitterLayout>
-                    </div>
+                        <div className="h-100 w-100">
+                            {isDragging && <div className="h-100 w-100 p-absolute" />}
+                            <Docs />
+                        </div>
+                    </SplitterLayout>
                 </div>
-                <div className="h-100 w-100">
-                    {isDragging && <div className="h-100 w-100 p-absolute" />}
-                    <Docs />
-                </div>
-            </SplitterLayout>
+            </div>
             <StatusBar />
         </div>
     );