From 5e8c3542108f4216c7bf1ec32e388cb95956f609 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     | 2 ++
 src/components/graph.tsx    | 4 ++--
 src/components/toolbar.scss | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/app.scss b/src/components/app.scss
index 74c3f7b..39353b1 100644
--- a/src/components/app.scss
+++ b/src/components/app.scss
@@ -65,6 +65,8 @@
     margin: 10px;
 
     .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;