1 files changed, 64 insertions, 18 deletions
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
index bfc1c1216..a9b4e2501 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.scss
@@ -1,3 +1,10 @@
+.no-margin {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+    margin-left: 0px !important;
+    margin-right: 0px !important;
+}
+
 .docCreatorMenu-cont {
     position: absolute;
     z-index: 100000;
@@ -269,25 +276,64 @@
 
     }
 
-    .docCreatorMenu-layout-preview-window {
-        padding: 5px;
-        flex: 0 0 auto;
-        overflow: scroll;
-        display: grid;
-        width: 240;
-        height: 240;
-        border: 1px solid whitesmoke;
-        border-radius: 5px;
-        background-color: rgb(34, 34, 37);
-        -ms-overflow-style: none; 
-        scrollbar-width: none;
-
-        .docCreatorMenu-layout-preview-item {
-            display: flex;
-            justify-content: center;
-            align-items: center;
+    .docCreatorMenu-layout-preview-window-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 85%;
+        height: auto;
+        position: relative;
+        padding: 0px;
+
+        &:hover .docCreatorMenu-zoom-button {
+            display: block;
+        }
+
+        .docCreatorMenu-layout-preview-window {
+            padding: 5px;
+            flex: 0 0 auto;
+            overflow: scroll;
+            display: grid;
+            width: auto;
+            height: auto;
+            max-width: 240;
+            max-height: 240;
+            border: 1px solid whitesmoke;
+            border-radius: 5px;
+            background-color: rgb(34, 34, 37);
+            -ms-overflow-style: none; 
+            scrollbar-width: none;
+
+            .docCreatorMenu-layout-preview-item {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border-radius: 3px;
+                border: solid 1px lightblue;
+            }
+        }
+
+        .docCreatorMenu-zoom-button{ 
+            display: none;
+            width: 15px;
+            height: 15px;
+            background: whitesmoke; 
+            background-color: rgb(34, 34, 37);
             border-radius: 3px;
-            border: solid 1px lightblue;
+            border: 1px solid whitesmoke;
+            padding: 0px;
+            font-size: 10px;
+            position: absolute;
+            top: 0px;
+            z-index: 6;
+            margin-left: 0px;
+            margin-top: 0px;
+            margin-right: 225px;
+            margin-bottom: 0px;
+
+            &.zoom-in{
+                top: 15px;
+            }
         }
     }
 }