fix bug with auto resize

1 files changed, 29 insertions, 21 deletions

diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
index 1b6efe01d..5b12c6f89 100644
--- a/src/client/views/nodes/DiagramBox.scss
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -1,4 +1,5 @@
 .DiagramBox {
+    overflow:hidden;
     width: 100%;
     height: 100%;
     display: flex;
@@ -27,6 +28,7 @@
         
     }
     .DiagramBox-wrapper {
+        overflow:hidden;
         width: 100%;
         height: 100%;
         display: flex;
@@ -34,6 +36,7 @@
         align-items: center;
         justify-content: center;
         .content {
+            overflow: hidden;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -59,6 +62,9 @@
                 }
             }
             .search-bar {
+                overflow:hidden;
+                position:absolute;
+                top:0;
                 .backButton{
                     text-align: center;
                     padding:0;
@@ -85,34 +91,36 @@
                     border-radius: 10px;
                 }
             }
+            .loading-circle {
+                position: absolute;
+                display:flex;
+                align-items: center;
+                justify-content: center;
+                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);
+                }
+            }
             .diagramBox{
                 flex: 1;
                 display: flex;
                 justify-content: center;
                 align-items: center;
                 svg{
+                    position: relative;
+                    top:25;
                     max-width: none !important;
-                }
-                .loading-circle {
-                    position: absolute;
-                    display:flex;
-                    align-items: center;
-                    justify-content: center;
-                    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);
-                    }
+                    height: calc(100% - 50px);
                 }
             }
         }