extensive fixes to DiagramBox

1 files changed, 53 insertions, 59 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index d2749f1ad..323638bff 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,3 +1,5 @@
+$searchbarHeight: 50px;
+
 .DIYNodeBox {
     width: 100%;
     height: 100%;
@@ -6,83 +8,75 @@
     align-items: center;
     justify-content: center;
 
-    .DIYNodeBox-wrapper {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        .DIYNodeBox {
-            /* existing code */
-
-            .DIYNodeBox-iframe {
-                height: 100%;
-                width: 100%;
-                border: none;
+    .DIYNodeBox {
+        /* existing code */
 
-            }
+        .DIYNodeBox-iframe {
+            height: 100%;
+            width: 100%;
+            border: none;
         }
+    }
 
-        .search-bar {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 100%;
-            padding: 10px;
+    .DIYNodeBox-searchbar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: $searchbarHeight;
+        padding: 10px;
 
-            input[type="text"] {
-                flex: 1;
-                margin-right: 10px;
-            }
+        input[type='text'] {
+            flex: 1;
+            margin-right: 10px;
+        }
 
-            button {
-                padding: 5px 10px;
-            }
+        button {
+            padding: 5px 10px;
         }
+    }
 
-        .content {
+    .DIYNodeBox-content {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: calc(100% - $searchbarHeight);
+        .diagramBox {
             flex: 1;
             display: flex;
             justify-content: center;
             align-items: center;
-            width:100%;
-            height:100%;
-            .diagramBox{
+            width: 100%;
+            height: 100%;
+            svg {
                 flex: 1;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                width:100%;
-                height:100%; 
-                svg{
-                    flex: 1;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    width:100%;
-                    height:100%; 
-                }
+                width: 100%;
+                height: 100%;
             }
         }
+    }
 
-        .loading-circle {
-            position: relative;
-            width: 50px;
-            height: 50px;
-            border-radius: 50%;
-            border: 3px solid #ccc;
-            border-top-color: #333;
-            animation: spin 1s infinite linear;
-        }
+    .loading-circle {
+        position: relative;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        border: 3px solid #ccc;
+        border-top-color: #333;
+        animation: spin 1s infinite linear;
+    }
 
-        @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
         }
     }
-}
\ No newline at end of file
+}