From 05b87700fc6445b753002b84a49e239194e9d7f5 Mon Sep 17 00:00:00 2001
From: Doug Martin <dmartin@concord.org>
Date: Fri, 5 Apr 2024 09:34:33 -0400
Subject: [PATCH] fix: Fix disappearing sidebar [PT-187321139]

Changed svg graph to use calculated height and 100% width to force svg to stay within the graph container.

Also added 10px gap to toolbar between top and bottom button groups.
---
 src/components/app.scss     | 3 +++
 src/components/graph.tsx    | 4 ++--
 src/components/toolbar.scss | 1 +
 3 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/app.scss b/src/components/app.scss
index 74c3f7b..501a82e 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -63,8 +63,11 @@
     display: flex;
     flex: 1;
     margin: 10px;
+    height: 100%;
 
     .left {
+      overflow: hidden;
+
       display: flex;
       flex-direction: column;
       justify-content: space-between;
diff --git a/src/components/graph.tsx b/src/components/graph.tsx
index 4ef256e..680428b 100644
--- a/src/components/graph.tsx
+++ b/src/components/graph.tsx
@@ -764,8 +764,8 @@ export const Graph = (props: Props) => {
   return (
     <div className="graph" ref={wrapperRef} onClick={handleClick}>
       <svg
-        width={width}
-        height={height}
+        width="100%"
+        height="calc(100vh - 20px)"
         viewBox={viewBox}
         ref={svgRef}
       />
diff --git a/src/components/toolbar.scss b/src/components/toolbar.scss
index 282f420..632be8a 100644
--- a/src/components/toolbar.scss
+++ b/src/components/toolbar.scss
@@ -6,6 +6,7 @@
   border-radius: 3px;
   background-color: #dddddd7f;
   justify-content: space-between;
+  gap: 10px;
 
   button {
     width: 32px;