From 6d0e97f50e6c3ed3d6a28743c3f56cd6b4d2f6c8 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Wed, 22 Dec 2021 17:36:16 -0600
Subject: [PATCH] app: fix pb-app div size and background color

---
 src/app/App.tsx          | 2 +-
 src/app/app.scss         | 8 ++++++++
 src/toolbar/toolbar.scss | 5 -----
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 4b21157d..cb652143 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -126,7 +126,7 @@ const App: React.FunctionComponent = (_props) => {
     const [isDragging, setIsDragging] = useState(false);
 
     return (
-        <div className="pb-app">
+        <div className="pb-app h-100 w-100 p-absolute">
             <Toolbar />
             <SplitterLayout
                 customClassName={`pb-app-body ${
diff --git a/src/app/app.scss b/src/app/app.scss
index f0a65643..2303acae 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -5,6 +5,14 @@
 
 @import '../variables.scss';
 
+.pb-app {
+    background-color: $pt-app-background-color;
+}
+
+.#{$ns}-dark .pb-app {
+    background-color: $pt-dark-app-background-color;
+}
+
 .pb-app-body {
     // height makes everything fit without scrolling
     height: calc(
diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss
index 7f2ae0e4..160fa551 100644
--- a/src/toolbar/toolbar.scss
+++ b/src/toolbar/toolbar.scss
@@ -5,13 +5,8 @@
 
 @import '../variables.scss';
 
-.#{$ns}-dark .pb-toolbar {
-    background-color: $pt-dark-app-background-color;
-}
-
 .pb-toolbar {
     height: $pb-toolbar-height;
-    background-color: $pt-app-background-color;
     padding: 0 $pt-grid-size * 1.5;
     position: relative;
     width: 100%;